javascript - 如何将导航菜单链接到 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);
    }
  });

});