1

4つのタブがあります。ロードすると最初のタブのみが開き、チェックボックスをクリックすると対応するタブが生成され、チェックを外すとタブが削除されます。これを行うにはどうすればよいですか。私のコードは

    <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/から私のコードをチェックすることができます

4

2 に答える 2

2

タブを削除する代わりに、タブを非表示にすることを検討してください。

次のCSSを追加して機能させることができます。

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

このフィドルを確認してください：http：//jsfiddle.net/2aQ2g/12/

もちろん、対応するタブコンテンツの非表示も処理する必要があります。

于 2013-03-04T10:46:50.117 に答える
0

ハーフアンサー..対応するチェックボックスのタブを有効にするためにクリック

  $(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-04T10:46:03.580 に答える