使用 Jquery-ui 选项卡，使用父选项卡集和子选项卡集，如何在选项卡“表兄弟”之间链接？

发布于 2024-10-22 02:14:50 字数 2348 浏览 6 评论 0原文

给定一个父选项卡集，每个选项卡都有多个子选项卡集。如何创建在“表兄弟”内容之间链接的？这是我到目前为止所尝试过的，我并不认为它是正确的！我尝试从选项卡 id=#A.1 跳转到表弟 #E.2 的每个链接都没有成功。

脚本：

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

原文

Given one parent tab set, with each tab having multiple child tab sets. How do i create a <a href="#??"></a> that links between 'cousin' content? This is what I've tried so far, I do not claim it to be right! Every link i've tried to jump from tab id=#A.1 to cousin #E.2 has not succeeded.

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

动听の歌 2024-10-29 02:14:51

像这样的东西会起作用：

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/

Something like this would work:

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

Working example: http://jsfiddle.net/petersendidit/uz7d5/

回复收藏 0 原文

~没有更多了~