4

4つのタブがあり、各タブには異なるデータが含まれています。チェックボックスをクリックすると、対応するタブが表示されますが、チェックを外すと、タブは表示されませんが、内容は表示されません。この問題を解決する方法は？私のページは

<style>
    .ui-state-disabled {
    display: none;
}
</style>
    <script>
    $(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
  });

$( "input[type=checkbox]" ).click(function(){
    if ($(this).is(':checked')) {
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
    }
    else{
         $('#tabs').tabs("disable", $(this).val());
    }
});
});
</script>

。

<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/12/で動作するコードを見ることができます

4

7 に答える 7

3

部分を確認してくださいelse... Working Demo

$(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
  });

$( "input[type=checkbox]" ).click(function(){
    if ($(this).is(':checked')) {
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
    }
    else{
        // $('#tabs').tabs("disable", $(this).val());
        $('#tabs').tabs("disable", $(this).val());
         $('#tabs').tabs("select", $(this).prev().val());
         $('#tabs').tabs("enable", $(this).prev().val());
    }
});
});
于 2013-03-05T06:08:25.470 に答える
2

あなたの他のものに追加var hhh = $("input:checked").val(); $('#tabs').tabs("enable", hhh); $('#tabs').tabs("select", hhh ); $("#tabs-"+hhh+" p").show();してください。

ライブデモ

                $(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
  });

$( "input[type=checkbox]" ).click(function(){
    if ($(this).is(':checked')) {
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
     $("#tabs-"+$(this).val()+" p").show();
    }
    else{
         $('#tabs').tabs("disable", $(this).val());
        $("#tabs-"+$(this).val()+" p").hide();
        var hhh = $("input:checked").val();
        $('#tabs').tabs("enable", hhh);
     $('#tabs').tabs("select", hhh );
     $("#tabs-"+hhh+" p").show();
    }
});
});
于 2013-03-05T05:52:18.313 に答える
2 
    $(function() {
      $("#tabs").tabs();
      $("#tabs").tabs("option", {
        "selected": 2,
        "disabled": [1,2,3]
      });

    $( "input[type=checkbox]" ).click(function(){
        if ($(this).is(':checked')) {
         $('#tabs').tabs("enable", $(this).val());
         $('#tabs').tabs("select", $(this).val() );
        }
        else{
             $('#tabs').tabs("disable", $(this).val());
             $('#'+$(this).attr('name')).hide();
        }
    });
});
于 2013-03-05T05:52:41.383 に答える
2

JSFiddleで確認できます

$(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 0,
    "disabled": [1,2,3]
  });

$( "input[type=checkbox]" ).click(function(){
    if ($(this).is(':checked')) {
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
    }
    else{
        $('#tabs').tabs("disable", $(this).val());
        var tab = $(this);
        $('#tabs').tabs("select", $(":checked").first().val());
        //$('#tabs').tabs("select", $(":checked").last().val());
        //It is based on you what to use. (first or last selected value)
    }
});
});

これが役立つことを願っています。よろしく

于 2013-03-05T05:54:13.770 に答える
2

これを試して

$( "input[type=checkbox]" ).click(function(){
    if ($(this).is(':checked')) {
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
    }
    else{
         $('#tabs').tabs("disable", $(this).val());
      $("#tabs-"+$(this).val()).children().hide());
    }
});

タブを無効にするだけです。コンテンツも非表示にします

于 2013-03-05T05:44:22.183 に答える
2

これが役立つかもしれません：

$("input[type=checkbox]").click(function () {
    if ($(this).is(':checked')) {
        $('#tabs').tabs("enable", $(this).val());
        $('#tabs').tabs("select", $(this).val());
        $('[id="' + this.name + '"]').find('p').show();
    } else {
        $('#tabs').tabs("disable", $(this).val());
        $('[id="' + this.name + '"]').find('p').hide();
    }
});

ノート：

contentクラスを追加する必要はありません。

ここでフィドルをチェックアウトしてください

于 2013-03-05T05:47:50.227 に答える
1

ui-state-disabled else部分のクラスを要素に追加すると、display: none;

于 2013-03-05T05:50:15.083 に答える