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

我有一个任务可以执行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>

如何做到这一点？

来源

2013-03-04 Niths

给你的收音机输入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

来源

2013-03-04 07:56:19 MIIB

不工作..选项卡未启用 – Niths 2013-03-04 08:03:59

这是编辑的另一个问题 – MIIB 2013-03-04 08:04:26

。您启用该选项卡的方式已被修正 – MIIB 2013-03-04 08:07:31

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

编辑简化了鳕鱼Ë进一步

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

} 

);

来源

2013-03-04 08:12:12 JustShrey

当我选择另一个单选按钮时，早期选定的单选按钮不清除。 – Niths 2013-03-04 08:21:02

啊..你需要保持所有单选按钮的名称相同，以便它在同一组中。在上面编辑并在实时链接 – JustShrey 2013-03-04 08:23:42

即可。通过选择新的它不会显示新标签，它只会打开它。 – Niths 2013-03-04 08:25:43

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

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

来源

2013-03-04 08:14:52

我更新了代码http://jsfiddle.net/2aQ2g/4/在这里我使用了复选框。当我单击它时将显示当我删除选择它必须禁用 – Niths 2013-03-04 08:50:38

http://jsfiddle.net/ 2aQ2g/19 / – 2013-03-04 13:10:33

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

回答

相关问题