Jquery 如何获取打开页面上特定选项卡的链接？

我正在为一个拥有jquery驱动的选项卡式内容的客户机开发一个

链接到正确的页面很容易，但挑战是当你到达那里时打开正确的选项卡。在“关于”页面上，滚动至底部，然后单击带有卡车的移动图标。这会带你去公园。这很好，但我希望它能够打开“专业”选项卡

以下是链接到该页面的代码：

<li><a id="moveit" href="services_move_it.html">Move It</a></li>

因为我需要在多个链接/选项卡组合上执行此操作，所以我希望找到一种系统化的方法

---

谢谢你的帮助

我需要JS代码来处理hashpart。它可能看起来有点像这样

handleHashPart = function(tabs) {
  var hashPart = window.location.hash;
  if (! hashPart || hashPart.length === 0) {
    return;
  }
  tabs.each(function() {
    var link = $(this);
    if (link.attr('href') == hashPart) {
      link.trigger('click');
      return false;
    }
    return true;
  });
};

handleHashPart($('a.tab'));

---

在连接处理程序后放置此文件。现在，您的链接应该可以工作了。

我最近尝试构建自己的选项卡。我更改了代码以满足您的需要，但我不确定它是否有效：

确保链接的id是 和你放在后面的一样

希望这有帮助

编辑：

下面的代码是根据您的结构将选项卡链接设置为活动的“查看注释”

    $(".tabs a").each(function(i){ // Loop through all the links
        if(curtab == $(this).attr("id")){ // Compare the value from the url with the id
            $(this).addClass("active"); // If equal add class active
        }
    });

---

使用Ariel Flesler的jQuery插件以及标准的jQuery UI Tabs小部件可以轻松实现这一点：

您可以在以下博客帖子中找到详细的操作方法：

这种方法需要最少的代码量，并且可以在所有页面中通用

首先，使用jQueryUITabs小部件设置选项卡

在使用选项卡的页面上包括jQuery插件：

<script src="/javascripts/jquery.localscroll.js?1281125099" type="text/javascript"></script>
<script src="/javascripts/jquery.scrollTo.js?1281125099" type="text/javascript"></script>

就这样

$('.LinkSelector').click(function(){
   $( "#tabs" ).tabs("select", "#tabs-1" );
  });

---

上面的代码也很有用。

改进了Rik的答案，这就是我使用Bootstrap4.0和JS为我的项目所做的

JS HTML

---

马瑞克，谢谢你的回复。这会出现在链接页面上还是目标页面上，或者两者都出现？好吧，现在你有了这样的st h：将href替换为href=why\u us。现在URL about_us.htmlwhy_us应该打开您的选项卡。希望这行得通，马瑞克。我们越来越近了。我按照你的指示添加了代码。我把它添加到移动的重物上。它会转到正确的页面，显示正确的内容，但选项卡仍然设置为第一个，而不是专业。此外，我想将评级更改为+1，但您需要修改答案部分以允许。谢谢。如果您将link.trigger更改为link.click。。。这不能解决tab没有设置的问题吗？Rick，我们越来越近了。该选项卡仍然没有正确选择。这是启动页面：从底部单击钢琴键盘。它会转到这个页面并显示正确的内容，但不会打开到正确的选项卡。当我查看您的源代码时，我看到您的选项卡链接保存在一个ul中，类为“tabs”。在jquery中，我似乎找不到将链接id与url中的id进行比较的位置。我在回答中添加了一些代码。你可以试试。我还注意到，在我点击about_us页面上的钢琴后，商业标签的内容显示在专业内容的下方。你可能也想调查一下。我明天再登记。代码可能会有点偏离，因为它几乎凌晨1点在这里；我希望您能理解这个想法，并在前进的道路上走得更远。要获得curtab，您可以使用var curtab=document.location.hash。在引导选项卡的情况下添加了我的答案，感谢您将此传递给我们。这正是我需要的功能。您的链接已断开：

var curtab = window.location.href; // Get the url
    curtab = curtab.split("#"); // Split the url at #
    curtab = "#" + curtab[1]; // Put the info after the # in a variable

    $("a.tab").each(function(i){ // Loop through all links and compare tab from url with value in link
        if(curtab == $(this).attr("href")){
            $(this).addClass("active"); // If they are the same, set that tab's class to active
        }
    });

$("a.tab").click(function(){ // Select tab
        $(".active").removeClass("active"); // Select the a, remove class for every link
        $(this).addClass("active"); // Select the clicked tab and add an active class
        var tabtocall = $(this).children().attr("href"); // Var to select current clicked tab
        $(".content").slideUp; // Slide up all content
        $(tabtocall).slideDown("normal"); // Slide down the selected content
    });

    $(".tabs a").each(function(i){ // Loop through all the links
        if(curtab == $(this).attr("id")){ // Compare the value from the url with the id
            $(this).addClass("active"); // If equal add class active
        }
    });

<script src="/javascripts/jquery.localscroll.js?1281125099" type="text/javascript"></script>
<script src="/javascripts/jquery.scrollTo.js?1281125099" type="text/javascript"></script>

$(document).ready(function() {
  if($("#tabs") && document.location.hash){
    $.scrollTo("#tabs");
  }
  $("#tabs ul").localScroll({ 
    target:"#tabs",
    duration:0,
    hash:true
  });
});

$('.LinkSelector').click(function(){
   $( "#tabs" ).tabs("select", "#tabs-1" );
  });

  $("#myTab a").each(function(i){ // Loop through all the links
    if(document.location.hash == $(this).attr("href")){ // Compare the value from the url with the id
        $(this).tab('show'); // If equal add class active
    }
  });

 <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#info">Info</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#note">Note</a>
    </li>
 </ul>