启用禁用 jquery 选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5661645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
enable disable jquery tab
提问by Krisanu
I have a jquery tab container, in which there are two tabs. Now what I want is initially second tab will be disabled. On clicking a button on the first tab second tab will be enabled and open automatically.
我有一个 jquery 选项卡容器，其中有两个选项卡。现在我想要的是最初将禁用第二个选项卡。单击第一个选项卡上的按钮后，将启用并自动打开第二个选项卡。
<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
<div class="tab-wrapper" id="tab-wrapper">
<div class="tab-header">
<ul class="tabs">
<li><a href="#tab1">overview</a></li>
<li><a href="#tab2">details</a></li>
</ul>
</div>
<div class="tab_container">
<div id="tab1" class="tab_content">
here is the list of the overview
</div>
<div id="tab2" class="tab_content">
Particular Details
</div>
</div>
</div>
采纳答案by amustill
The way I would tackle this is to use a variable that tracks whether the button has been clicked, setting it to 'false' by default and 'true' when the button has clicked.
我解决这个问题的方法是使用一个变量来跟踪按钮是否已被单击，默认情况下将其设置为“false”，并在单击按钮时将其设置为“true”。
Checking the value of this variable within the click event of the tab links will then allow you to decide whether to show the new tab, do nothing, or perhaps show a message.
在选项卡链接的单击事件中检查此变量的值将允许您决定是显示新选项卡、什么都不做，还是显示一条消息。
Here's a working example: http://jsbin.com/ijoco5
这是一个工作示例：http: //jsbin.com/ijoco5
回答by Ga???
You can use the following
您可以使用以下
$("#tabs").tabs({disabled: [0,1]});
And use the zero-indexed numbers to choose which are disabled. To enable your tabs you can use this:
并使用零索引数字来选择哪些被禁用。要启用您的标签，您可以使用：
$("#tabs").tabs({disabled: false });
For setting the selected tab, you can use this example from jQuery Tabs:
要设置选定的选项卡，您可以使用jQuery Tabs 中的此示例：
var $tabs = $('#tabs').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
回答by Tanner Ottinger
I would disable all of them by default, and then enable the first one. After that, the button should be pretty simple. All of this should be pretty simple.
我会默认禁用所有这些，然后启用第一个。之后，按钮应该非常简单。所有这些都应该非常简单。
First: jQuerys tabs('disable')just doesn't work. So I built my own function to disable them all. Here that is:
第一：jQuerystabs('disable')不起作用。所以我构建了自己的函数来禁用它们。这里是：
function disableTabs(obj){
var c = obj.find("ul li").size();
for(var i=0;i<c;i++){
obj.tabs("disable", i);
}
}
You can use it like this: disableTabs($('#myTabs')). jQuery doesn't allow you to disable the current tab - and since this is going on page load, it's going to be the first one. Then, you will need to make some variables to store some data...
您可以使用它像这样：disableTabs($('#myTabs'))。jQuery 不允许您禁用当前选项卡 - 由于这是页面加载，它将成为第一个。然后，您将需要创建一些变量来存储一些数据...
var openTab = 0;
var currTab = 0;
Then, a couple of functions to handle it...
然后，几个函数来处理它......
function enableTab(obj, num){
obj.tabs("enable", num);
}
function next(){
openTab++;
currTab++;
enableTab($(".tabs"), currTab);
$(".tabs").tabs("select", currTab);
}
function prev(){
openTab--;
currTab--;
$(".tabs").tabs("select", currTab);
}
Then , we just attach some event handlers:
然后，我们只需附加一些事件处理程序：
$('#myTab').bind('tabsshow', function(event, ui) {
currTab = ui.index;
});
$(".next").click(function(){
next();
});
$(".prev").click(function(){
prev();
});
The HTML for those buttons is really simple:
这些按钮的 HTML 非常简单：
<a class='prev'>Previous</a>
<a class='next'>Next</a>
Hope this helps - and good luck!
希望这会有所帮助 - 祝你好运！
BTW: I have some full working tabs up herethat you might want to look at.
BTW：我有一些完整的工作标签了这里，你可能想看看。
回答by Dharmesh
Assuming you are clicking a button which is not a inside tab class and want 2nd tab to open then you can add trigger event like :
假设您单击一个不是内部选项卡类的按钮并希望打开第二个选项卡，那么您可以添加触发事件，如：
$('.tabs > #tab2').trigger('click');
And give id to li > a : <a id="tab1" href="#tab1"></a>
并将 id 赋予 li > a ： <a id="tab1" href="#tab1"></a>
