启用禁用jquery选项卡

Question

我有一个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> 

Answer 1

我会解决这个问题的方法是使用跟踪按钮是否被点击，按钮按下时，将其设置为默认为“假”与“真”的变量。

检查选项卡链接的点击事件中此变量的值将允许您决定是否显示新选项卡，不执行任何操作或可能显示消息。

这里的工作的例子：假设你点击一个按钮，这是不是一个内部标签类，并希望第二个选项卡中打开，那么你可以添加触发事件http://jsbin.com/ijoco5

Answer 2

，如：

$('.tabs > #tab2').trigger('click'); 

并给id to li> a：

Answer 3

默认情况下，我会禁用所有这些设置，然后启用第一个。之后，按钮应该非常简单。所有这些都应该很简单。

第一：jQuerys tabs('disable')只是不起作用。所以我建立了自己的功能来禁用它们。这里是：

function disableTabs(obj){ 
    var c = obj.find("ul li").size(); 
    for(var i=0;i<c;i++){ 
     obj.tabs("disable", i); 
    } 
} 

您可以像这样使用它：disableTabs($('#myTabs'))。 jQuery不允许你禁用当前选项卡 - 并且由于这是页面加载，它将成为第一个。然后，你将需要做出一些变量来存储一些数据...

var openTab = 0; 
var currTab = 0; 

然后，一对夫妇的函数来处理它...

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> 

---

希望这有助于 - 祝你好运！

顺便说一句：我有一些完整的工作标签here，你可能想看看。

Answer 4

您可以使用以下

$("#tabs").tabs({disabled: [0,1]}); 

，并使用零索引号选择哪个被禁用。为了使你的标签，你可以使用这个：

$("#tabs").tabs({disabled: false }); 

用于设置选择的选项卡，您可以使用从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; 
});