С помощью вкладок Jquery-ui, с использованием наборов родительских вкладок и дочерних вкладок, как связать вкладки между «кузенами»? - PullRequest
Новая
       10

С помощью вкладок Jquery-ui, с использованием наборов родительских вкладок и дочерних вкладок, как связать вкладки между «кузенами»?

0 голосов
/ 15 марта 2011

Имеется один родительский набор вкладок, где каждая вкладка имеет несколько дочерних наборов вкладок.Как мне создать <a href="#??"></a>, который связывает контент «двоюродного брата»?Это то, что я пробовал до сих пор, я не утверждаю, что это правильно!Каждая ссылка, которую я пытался перейти со вкладки id = # A.1 на двоюродного брата # E.2, не удалась.

script: 

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

1 Ответ

1 голос
/ 13 апреля 2011

Примерно так будет работать: 

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/

...