启用禁用jquery选项卡
我有一个jquery选项卡容器,其中有两个选项卡。现在我想要的是,最初第二个选项卡将被禁用。单击第一个选项卡上的按钮后,第二个选项卡将启用并自动打开启用禁用jquery选项卡,jquery,tabs,jquery-tabs,Jquery,Tabs,Jquery Tabs,我有一个jquery选项卡容器,其中有两个选项卡。现在我想要的是,最初第二个选项卡将被禁用。单击第一个选项卡上的按钮后,第二个选项卡将启用并自动打开 <script type="text/javascript"> $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").ad
<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>
我解决这个问题的方法是使用一个变量来跟踪按钮是否被单击,在默认情况下将其设置为“false”,在按钮被单击时将其设置为“true” 在选项卡链接的click事件中检查此变量的值将允许您决定是显示新选项卡、不执行任何操作,还是显示消息
下面是一个工作示例:假设您单击的按钮不是内部选项卡类,并且希望第二个选项卡打开,那么您可以添加触发器事件,如:
$('.tabs > #tab2').trigger('click');
然后给li>a:一个id,默认情况下,我会禁用所有这些,然后启用第一个。之后,按钮应该非常简单。所有这些都应该非常简单 第一:jQuerys标签“禁用”根本不起作用。所以我构建了自己的函数来禁用它们。这就是:
function disableTabs(obj){
var c = obj.find("ul li").size();
for(var i=0;i<c;i++){
obj.tabs("disable", i);
}
}
然后,几个函数来处理它
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);
}
然后,我们只附加一些事件处理程序:
$('#myTab').bind('tabsshow', function(event, ui) {
currTab = ui.index;
});
$(".next").click(function(){
next();
});
$(".prev").click(function(){
prev();
});
这些按钮的HTML非常简单:
<a class='prev'>Previous</a>
<a class='next'>Next</a>
希望这有帮助-祝你好运
顺便说一句:我有一些完整的工作标签,你可能想看看。你可以使用下面的
$("#tabs").tabs({disabled: [0,1]});
并使用零索引编号选择禁用的编号。要启用选项卡,可以使用以下选项:
$("#tabs").tabs({disabled: false });
要设置所选选项卡,可以使用以下示例:
这正是要求。但是我没有使用默认的jquery选项卡,在我的例子中,tabLinks.eq0或tabLinks.eq1不起作用。那么我应该如何选择第二个选项卡呢?没有任何默认的jQuery选项卡功能,除非您使用jqueryui选项卡,但有时这太过分了。“tabLinks”只是我设置的一个变量,它包含选择器$'tabs a'中的元素,因此我不必重复调用此选择器。一种缓存方式,如果愿意的话。eq'只是过滤元素的另一种方式,类似于“:first”,从0开始表示第一个元素。我已经修改了这个示例以使用您的标记,所以可能它更有意义:要使禁用生效,请确保当前未从以前的显示中选择此选项卡。我必须取消选择要禁用的选项卡,以便正确显示该选项卡是否处于活动状态,即使以编程方式禁用了`$tabs,该选项卡仍将显示$tabs.tabs{disabled:[1]}`谢谢你的回答。
$("#tabs").tabs({disabled: false });
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;
});