如何使用jquery隱藏/顯示選項卡

我有四個選項卡。加載時只打開第一個選項卡，當我們點擊複選框時會生成相應的選項卡，當我們取消選中時，選項卡將被刪除。我該怎麼辦這個？我的代碼是如何使用jquery隱藏/顯示選項卡

<script> 
    $(function() { 
    $("#tabs").tabs(); 
    }); 
</script> 
<style> 

</style> 
</head> 
<body> 
<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Nithin</a> </li> 
    <li><a href="#tabs-2">Vipin</a></li> 
    <li><a href="#tabs-3">Sachin</a></li> 
    <li><a href="#tabs-4">Ganguly</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Nithin</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Vipin</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Sachin</p> 
    </div> 
    <div id="tabs-4"> 
    <p>Ganguly</p> 
    </div> 
</div> 
<input type="checkbox" name="tabs-1" value="1">tabs-1 
<input type="checkbox" name="tabs-2" value="2">tabs-2 
<input type="checkbox" name="tabs-3" value="3">tabs-3 
<input type="checkbox" name="tabs-4" value="4">tabs-4 
<br> 
</body> 
</html>

您可以從http://jsfiddle.net/2aQ2g/5/

來源

2013-03-04 Niths

你有一個不好的文檔類型。 – Jai 2013-03-04 10:36:47

不相關，但請爲複選框旁邊的文本添加標籤，我討厭不能通過單擊文本切換複選框。 – qwerty 2013-03-04 10:49:55

而不是刪除選項卡，考慮隱藏它。

您可以添加以下CSS來使其工作。

.ui-state-disabled { 
    display: none; 
}

檢查此琴：http://jsfiddle.net/2aQ2g/12/

當然也需要處理的相應選項卡的內容隱藏也是如此。

來源

2013-03-04 10:46:50 ryadavilli

在這裏，當我隱藏標籤的內容來到那裏。它可見。 – Niths 2013-03-05 04:24:45

半答案檢查我的代碼..for使在cooresponding複選框，單擊該選項卡

$(function() { 
     $("#tabs").tabs(); 

    $("input[type=checkbox]").click(function(){ 
     if ($(this).is(':checked')) { 

      $('#tabs').tabs({"selected": parseInt($(this).val()-1),"enabled":parseInt($(this).val()-1) }); 
     } 
     }); 
    });

來源

2013-03-04 10:46:03 coolguy

如何使用jquery隱藏/顯示選項卡

回答

相關問題