从其他页面导航到主标签内的子标签

Question

使用不同级别的标签来显示大量信息。我有2个级别的标签。 1级是主要类别。第二级是子类别。

当前，当我从其他页面传递1级选项卡的href时，将导航至特定选项卡。我想要实现的是从另一个页面单击一个按钮，然后直接导航到选项卡的第二级。

例如：考虑2个主要选项卡（“级别1”选项卡）漫威和DC
绿巨人和蜘蛛侠是Marvel选项卡下的2个选项卡
超人和蝙蝠侠是DC选项卡下的2个选项卡

我想要实现的是，如果在单击鼠标按钮时将蝙蝠侠的按钮放置在其他页面上，则会将我定向到DC类别的蝙蝠侠选项卡。

我的代码如下：

<!--Level 1 tabs-->
    <a href="#marvel" data-toggle="tab">Marvel</a>
    <a href="#dc" data-toggle="tab">dc</a>

    <!--Level 1 content-->

    <div class="tab-content">
      <div class="tab-pane fade in active" id="marvel">

    <!--Level 2 tabs-->
    <ul class="nav nav-pills nav-stacked col-md-2">
       <li class="active><a href="#marvel_1" data-toggle="pill">Hulk</a></li>
      <li><a href="#marvel_2" data-toggle="pill">SpiderMan</a></li>
    </ul>

  <!--Level 2 Container-->
        <div class="tab-pane active" id="marvel_1">
            <p>The Hulk Tab!</p>
        </div>

        <div class="tab-pane" id="marvel_2">
            <p>The Spiderman Tab!</p>
        </div>
   </div> <!--End: Marvel Main Tab-->
 </div> <!--End: Tab Content-->

   <div class="tab-content">
      <div class="tab-pane fade in" id="dc">

    <!--Level 2 tabs-->
    <ul class="nav nav-pills nav-stacked col-md-2">
       <li class="active><a href="#dc_1" data-toggle="pill">Superman</a></li>
      <li><a href="#dc_2" data-toggle="pill">Batman</a></li>
    </ul>

  <!--Level 2 Container-->
        <div class="tab-pane active" id="dc_1">
            <p>The SuperMan Tab!</p>
        </div>

        <div class="tab-pane" id="dc_2">
            <p>The Batman Tab!</p>
        </div>
   </div> <!--End: DC Main Tab-->

当我单击时从另一个页面

   <a href="description.html#marvel">Marvel</a>

description.html是包含选项卡的页面。描述页面上的jQuery：

  <script>
    $(function () {
       var activeTab = $('[href=' + location.hash + ']');
       activeTab && activeTab.tab('show');
    });
    </script>

从其他页面转到特定的“漫威”或“ Dc”选项卡。我要实现的目标是直接转到DC标签下的Spiderman标签或batman标签。

摘要：当前要从其他页面导航到选项卡的第1级，要直接从其他页面进入第2级。

考虑：

-漫威
-绿巨人
--SpiderMan

-DC
-超人
-蝙蝠侠
当前正直接从其他页面通过anchorlink转到“ dc”选项卡，想要直接导航到Batman

Answer 1

通常，您需要使用url变量而不是位置哈希来实现。但缺点是，浏览器历史记录无法识别您在不同的英雄页面中循环（使您能够使用前进/后退按钮）。因此您必须创建其他代码才能使其正常工作。

所以这是一个解决方案，我们将所有需要的信息“存储”在位置哈希中。为了使解析更容易，我们使用特殊字符作为分隔符（碰巧是一样的，就像您将使用url变量一样）：&用于区分不同的变量，而=用于分隔键，值对。 新的位置哈希将类似于：#universe=dc&hero=aquaman

脚本会将其转换为名称为selectedHero的对象，以便可以通过selectedHero.universe和selectedHero.hero来访问值

通常，代码位于$( document ).ready(function(){函数中。

创建一个函数以读取位置哈希值并将数据作为对象返回。

  function getSelectedHero() {
      var mySelectedHero = {}; //initialize a new empty object
      var currentLocationHashValue = window.location.hash //read the location hash 
        .replace("#", "") //trim the '#' out of the string
        .split(/[&]+/); //split the string into an array

      $(currentLocationHashValue).each(function() { //loop through the freshly created array
        mySelectedHero[this.split(/[=]+/)[0]] = this.split(/[=]+/)[1]; //split the string into key/value pairs and assign them to the object, created at the beginning of the function 
      });
      return mySelectedHero; //return the object
    }

我们必须在这里主要部分。第一个使用#universe=dc&hero=aquaman和[0]="universe=dc"将哈希从[1]="hero=aquaman"拆分为一个数组 在第二部分中，我们循环遍历所有数组元素（在这种情况下，只有两个，如上所述），然后再次拆分它们，为所需对象创建key -> value对。 return传递以下对象：

object{ universe: "dc", hero: "aquaman" }

现在可以轻松使用它，为所选英雄选择正确的标签

    function showSelectedHeroTab(selectedHero) {
      //don't forget to 'reset' the page, hiding all currently visible tabs
      $(".universe").hide();
      $(".hero").hide();

      //then open tab for selected hero
      $("#" + selectedHero.universe).show();
      $("#" + selectedHero.hero).show();
    }

这很简单，该函数将传递对象，因此您可以访问值，然后使用"#"+和变量名构建jquery选择器。

仅包括上述功能时，将不会发生任何事情。所以我们首先必须调用函数：

    var selectedHero = getSelectedHero();
    showSelectedHeroTab(selectedHero);

此外，只要位置哈希值发生变化，我们都希望“更新”页面：

    $(window).on("hashchange", function() {
      var selectedHero = getSelectedHero();
      showSelectedHeroTab(selectedHero);
    }); 

此代码完全错过了某种错误处理。因此，如果位置哈希为空，则Universe /英雄对不匹配（例如marvel + batman）-因此，当数据不可用时，您必须添加某种逻辑以转发到默认选项卡！ / p>

出于测试目的，我创建了一个独立的html页面，因此它看起来与您的标记不同，但是我想，您会弄清楚如何将所需的部分移入代码中。

这是完整的文件，包括html标记，脚本和jcdn。只需将其复制并粘贴到一个空文件中，然后使用浏览器打开并查看它是否正在运行...

<html>
<body>
    <div id="header">
        <p>
          <a href="#universe=dc&hero=superman">superman</a>
          <a href="#universe=dc&hero=batman">batman</a>
          <a href="#universe=dc&hero=aquaman">aquaman</a>
          <a href="#universe=dc&hero=flash">flash</a>
        </p>
        <p>
          <a href="#universe=marvel&hero=hulk">the hulk</a>
          <a href="#universe=marvel&hero=wolverine">wolverine</a>
          <a href="#universe=marvel&hero=ironman">iron man</a>
          <a href="#universe=marvel&hero=spiderman">spiderman</a>
        </p>
    </div>

<div id="body">
    <div id="marvel" class="universe">marvel: <br/>
        <div class="hero" id="hulk">
            hulk
        </div>
        <div class="hero" id="ironman">
            ironman
        </div>
        <div class="hero" id="wolverine">
            wolverine
        </div>
        <div class="hero" id="spiderman">
            spiderman
        </div>
    </div>
    <div id="dc" class="universe">dc: <br/>
        <div class="hero" id="superman">
            superman
        </div>
        <div class="hero" id="batman">
            batman
        </div>
        <div class="hero" id="aquaman">
            aquaman
        </div>
        <div class="hero" id="flash">
            flash
        </div>
    </div>
</div>

</body>

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous">
</script>

<script>
    $( document ).ready(function() {            

        // we create a function to get the location hash 'data' as an object
        function getSelectedHero() {
          var mySelectedHero = {}; //initialize a new empty object
          var currentLocationHashValue = window.location.hash //read the location hash -> e.g. "#universe=dc&hero=batman"
            .replace("#", "") //trim the '#' out of the string -> "universe=dc&hero=batman"
            .split(/[&]+/) //split the string into an array -> [0]="universe=dc" [2]="hero=batman"
          $(currentLocationHashValue).each(function() { //loop through the freshly created array
            mySelectedHero[this.split(/[=]+/)[0]] = this.split(/[=]+/)[1]; //split the string into key/value pairs and assign them to the object, created at the beginning of the function 
          });
          return mySelectedHero; //return the object
        }

        // and we create a function, that opens the desired tab
        function showSelectedHeroTab(selectedHero) {
          //first make sure, nothing is shown 
          $(".universe").hide();
          $(".hero").hide();

          //then open tab for selected hero
          $("#" + selectedHero.universe).show();
          $("#" + selectedHero.hero).show();
          console.log (selectedHero);
        }

        //then we initally call the functions, to read the hash and show the tab 
        var selectedHero = getSelectedHero();
        showSelectedHeroTab(selectedHero);

        // additionally bind the event handler 'onhashchange' to fire when the location hash changes, to call the first two functions
        $(window).on("hashchange", function() {
        var selectedHero = getSelectedHero();
        showSelectedHeroTab(selectedHero);
        }); 
    });
</script>   
</html>