啓用禁用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; 
});