2011-03-14 164 views
0

給定一個父標籤集,每個標籤具有多個子標籤集。如何創建鏈接「堂兄弟」內容的<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> 
+0

我沒有時間給現在完整的答案,但我h大家以前做過類似的事情,你可以在這裏看到一個有效的例子:http://english.byu.edu/schol_awards/。如果您希望獲得更多幫助,請在本週晚些時候再提供一些幫助。 – undefined 2011-03-22 04:24:55

回答

1

像這樣的工作:

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

工作例如:http://jsfiddle.net/petersendidit/uz7d5/

+0

就是這樣。 – DefyGravity 2011-04-19 20:08:57

相關問題