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

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

给你的 radio 输入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(函数(){
警报(“一”)；
$( "#tabs").tabs('启用', 2);
});给别人。最好通过一个函数处理它并将 tabid 发送给函数

这是现场演示: Live Demo