使用Jquery-ui选项卡,使用Parent选项卡集和子选项卡集,如何链接选项卡'cousins'?
问题描述:
给定一个父标签集,每个标签具有多个子标签集。如何创建链接“堂兄弟”内容的<a href="#??"></a>
?这是我到目前为止所尝试的,我不认为它是正确的!我试图从tab id =#A.1跳到堂兄#E.2的每个链接都没有成功。使用Jquery-ui选项卡,使用Parent选项卡集和子选项卡集,如何链接选项卡'cousins'?
脚本:
<script> $(document).ready(function(event){
var tabs = $("#parentTabSet, #childSet1, #childSet2").tabs();
//here's what i've tried so far:
$(".interTabLink").click(function(event){
//this gets the `<ul><li><a href="#someId">tab user wants to see</a></li></ul>`
var ulLink =$(".anytabset").find("[href='"+$(this).attr("href")+"']");
//filter the 'var tabs' array to only have the tabset we want.
tabs.filter("#"+ulLink.closest("div").attr("id")).tabs("select", $(this).attr("href"));
});
});
</script>
HTML:
<body>
<div id="parentTabSet" class="anyTabSet">
<ul>
<li><a href="#A">parent A</a></li>
<li><a href="#B">parent B</a></li>
<li><a href="#C">parent C</a></li>
<li><a href="#D">parent D</a></li>
<li><a href="#E">parent E</a></li>
</ul>
<div id="A">
<div id="childset1" class="anyTabSet">
<ul>
<li><a href="#A.1">foo</a></li>
<li><a href="#A.2">bar</a></li>
</ul>
<div id="#A.1"><p>insert your latin here</p></div>
<div id="#A.2">
<!--- this will link to cousin #E.2, with parent tab E --->
<a href="#E.2" class="interTabLink">more information here</a>
</div>
</div>
</div>
<div id="B">
<p>insert your latin here</p>
</div>
<div id="C">
<p>insert your latin here</p>
</div>
<div id="D">
<p>insert your latin here</p>
</div>
<div id="E">
<div id="childset2" class="anyTabSet">
<ul>
<li><a href="#E.1">foo</a></li>
<li><a href="#E.2">bar</a></li>
</ul>
<div id="#E.1">stuff</div>
<div id="#E.2">here</div>
</div>
</div>
</div>
</body>
答
像这样的工作:
var mytabs = $('.anyTabSet').tabs();
$(".interTabLink").click(function(event){
event.preventDefault();
var id = $(this).attr("href");
var tab = mytabs.find("li [href='"+id+"']");
if (tab.length) {
var tabset = tab.closest('.anyTabSet').tabs("select", id);
if (tabset.length) {
id = id.replace(/_[0-9]/,'');
tabset.parents('.anyTabSet').tabs("select", id);
}
}
});
+0
就是这样。 – DefyGravity 2011-04-19 20:08:57
我没有时间给现在完整的答案,但我h大家以前做过类似的事情,你可以在这里看到一个有效的例子:http://english.byu.edu/schol_awards/。如果您希望获得更多帮助,请在本周晚些时候再提供一些帮助。 – undefined 2011-03-22 04:24:55