如何将导航菜单链接到jQuery选项卡

How to link navigation menu to jQuery tabs

本文关键字：jQuery 选项 链接 菜单 导航      更新时间：2023-09-26

我有一个标题导航菜单，需要链接到jQuery选项卡，因此链接必须在同一页上打开一个选项卡，链接到选项卡，然后从另一页打开它们。我在另一个页面上使用了它，但不知道如何在同一页面上打开带有外部链接的特定选项卡，而不为每个子页面包含单独的标题，这使用了导航中链接的选项卡。

这是一个Jsfidle，但它存在问题，因为导航中的链接指向外部文件。要点是，导航应该从外部页面开始工作，然后在同一页面上也可以打开选项卡

http://jsfiddle.net/vbonoL5b/

这是菜单的一部分（其2级ul菜单）

<div id="nav">
  <ul><li><a href="index.php?lang=<?php echo $lang ?>">Home</a>
                    <ul>
                        <li><a href="index.php?lang=<?php echo $lang ?>#tabs-1" class="tabLink">Concept</a></li>
                        <li><a href="index.php?lang=<?php echo $lang ?>#tabs-2" class="tabLink">Benefits</a></li>
                    </ul>
  </li></ul>
</div>

选项卡非常简单jQuery选项卡：

<div id="icon-tabs">
              <ul>
                <li><a href="#tabs-1" id="item1" ><div class="icon-tab"><h4>Concept</h4><img src="img/concept.png"></img></div></a></li>
                <li><a href="#tabs-2" id="item2" ><div class="icon-tab"><h4>More</h4><img src="img/benefits.png"></img></div> </a></li>
              </ul>
        <div id="tabs-1">
           ....
        </div>
</div>

我尝试过一些东西，但我从未设法在同一页面上打开链接：

$(function() {
//Load tabs
 $( "#icon-tabs" ).tabs();
//Check url and open appropriate tab (for when you come from external site)
 if(document.location.hash!='') {
    //get the index from URL hash
    tabSelect = document.location.hash.substr(1,document.location.hash.length);
    $("#icon-tabs").tabs('select',tabSelect-1);
 }  
//Use the nav to open local tabs?? I tried .onclic events based on ID and class of links in menu, but never got it working.
// For example:
 $('.tabLink').click(function(e) {
  if(document.location.hash!='') {
     (e).preventDefault();
     //get the index from URL hash
     tabSelect = document.location.hash.substr(1,document.location.hash.length);
     $("#icon-tabs").tabs('select',tabSelect-1);
   }
  });
});

我不确定我做错了什么。感谢您的帮助或建议！

使用以下代码。index函数使用"ID"属性直接为元素提供索引

$(function() {
//Load tabs
  $( "#icon-tabs" ).tabs();
  //Check url and open appropriate tab (for when you come from external site)
    if(document.location.hash!='') {
   //get the index from URL hash
     tabSelect = $('#icon-tabs div').index($(document.location.hash));
     $("#icon-tabs").tabs('select',tabSelect);       }  
    //Use the nav to open local tabs?? I tried .onclic events based on ID and class of links in menu, but never got it working.
  // For example:
  $('.tabLink').click(function(e) {
   if(document.location.hash!='') {
      e.preventDefault();
     tabSelect = $('#icon-tabs div').index($(document.location.hash));
     $("#icon-tabs").tabs('select',tabSelect);
    }
  });
});
相关文章：