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

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 "enable"；

<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 :-> 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>

EDIT进一步简化了代码

 $(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');
});