Question

我有一个任务要做Jquery选项卡。加载时，仅禁用所有选项卡，仅启用第一个选项卡，同时必须选中其单选按钮。如果更改单选按钮，则选项卡也必须更改。我的页面是

<script>
  $(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
});
    $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });
      $('#enable1').click( function(){
      alert("a");
        $( "#tabs-2" ).tabs({ enabled: true });
      });
  });
  </script>

    <li><a href="#tabs-1">klj</a> </li>
    <li><a href="#tabs-2">jljl</a></li>
    <li><a href="#tabs-3">Sachin</a></li>
    <li><a href="#tabs-4">Ganguly</a></li>
  </ul>
  <div id="tabs-1">
    <p>jkljl</p>
  </div>
  <div id="tabs-2">
    <p>jkljl</p>
  </div>
   <div id="tabs-3">
    <p>Sachin</p>
  </div>
   <div id="tabs-4">
    <p>Ganguly</p>
  </div>
</div>

<input type="radio" name="tabs-1" value="tabs-1">tabs-1
<input type="radio" name="tabs-2" value="tabs-2">tabs-2
<input type="radio" name="tabs-3" value="tabs-3">tabs-3
<input type="radio" name="tabs-4" value="tabs-4">tabs-4<br>
</body>
</html>

怎么做？

Answer 1

将您的无线电输入ID设为“启用”;

<input type="radio" id="enable1" name="tabs-1" value="tabs-1">tabs-1
<input type="radio" name="tabs-2" id="enable2" value="tabs-2">tabs-2
<input type="radio" name="tabs-3" id="enable3" value="tabs-3">tabs-3
<input type="radio" name="tabs-4" id="enable4" value="tabs-4">tabs-4<br>

您还应该更改启用和扩展 $('#enable2').click( function(){ alert("a"); $( "#tabs" ).tabs('enable', 2); }); 给别人最好通过一个函数处理它并将tabid发送到函数

这是现场演示： Live Demo

Answer 2

此处的实时ID： - ＆gt; http://jsfiddle.net/2aQ2g/

将您的代码更改为此

单选按钮

<input type="radio" name="tabs" value="1">tabs-1
<input type="radio" name="tabs" value="2">tabs-2
<input type="radio" name="tabs" value="3">tabs-3
<input type="radio" name="tabs" value="4">tabs-4<br>

编辑进一步简化了代码

 $(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
  });
  $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });  
 $( "input[type=radio]" ).click(function(){
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
});

}

 );

Answer 3

$("input[type='radio']").click(function(){

    var val = $(this).val();
   $("[href='#"+val+"']").parent().attr('class','ui-state-default ui-corner-top');
});

单击单选按钮时如何启用选项卡

3 个答案: