2013-03-04 66 views
2

我有一个任务做jquery选项卡。在此选择复选框时,相应的选项卡必须显示在页面上,其他选项必须禁用。多选复选框也是允许的,然后才能启用相应的页面。如何启用选项卡,同时选择复选框

我的代码是

<html !doctype> 
<head> 
<title>JqueryMenu</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#tabs").tabs(); 
    $("#tabs").tabs("option", { 
    "selected": 2, 
    "disabled": [1,2,3] 
    }); 
$("input[type=checkbox]").click(function(){ 
    $('#tabs').tabs("enable", $(this).val()); 
    $('#tabs').tabs("select", $(this).val()); 
}); 
}); 
</script> 
</head> 
<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/4/

回答

相关问题