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

Question

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

这里是一个Jsfiddle，但是它有问题，因为导航中的链接指向外部文件。要点是，导航应该既可以从外部页面工作，也可以在同一页面上工作，只是为了打开一个标签

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

我不确定我做错了什么。任何帮助或建议表示赞赏！

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

});