转到 # 超链接上的特定选项卡 (accordin)

Question

我正在使用以下代码来切换选项卡。但问题是如果我将标签 ID 放在带有 # 的 url 中，它不会转到那个特定的标签。

<a href="index.php#tab2">Tab 2</a>
<a href="index.php#tab3">Tab 3</a>

下面是代码

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

html代码

        <ul class="tab-links">
            <li class="active"><a style="" href="#tab1">Account</a></li>
            <li><a href="#tab2">Jobs Posted</a></li>
            <li><a href="#tab3">Messages</a></li>
            <li><a href="#tab4">Post A Job</a></li>
        </ul>
<div class="tab-content">
    <div id="tab1" class="tab active" style="padding-bottom:30px;">
    </div>
    <div id="tab1" class="tab" style="padding-bottom:30px;">
    </div>
    <div id="tab1" class="tab" style="padding-bottom:30px;">
    </div>
</div>

Answer 1

您可以尝试修改这一行：var currentAttrValue = jQuery(this).attr('href').split("#")[1];

这样您就获得了链接的href 属性的"tab2" 部分

jQuery(document).ready(function() {
    var changeTab = function(id) {
        // Show/Hide Tabs
        jQuery('.tab-content #' + id).show().siblings().hide();

        // Change/remove current tab to active
        jQuery('.tab-content #' + id + ':visible').addClass("active").siblings().removeClass('active');
    };

    jQuery('.tabs .tab-links a').on('click', function(e)  {
        e.preventDefault();
        // Here you will get the tab id, comming from the clicked hyperlink
        var currentAttrValue = jQuery(this).attr('href').split("#")[1];
        // Change/remove current tab to active
        jQuery(this).parents("li").addClass("active").siblings().removeClass('active');
        changeTab(currentAttrValue);
    });
  
    var tab = document.location.href.split("#");
    if(tab.length > 0) {
      var id = tab[1];
      jQuery('.tabs .tab-links a[href="#' + id + '"]').click();
      window.addEventListener("load",function() {
        jQuery(window).scrollTop(0);
      },true);
    }
});

.active {
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content">
<div id="tab1" class="tab active" style="padding-bottom:30px;">tab 1 content
</div>
<div id="tab2" class="tab" style="padding-bottom:30px;">tab 2 content
</div>
<div id="tab3" class="tab" style="padding-bottom:30px;">tab 3 content
</div>
</div>
<div class="tabs">
  
  <div class="tab-links">
    <a href="index.php#tab1">Tab 1</a>
    <a href="index.php#tab2">Tab 2</a>
    <a href="index.php#tab3">Tab 3</a>
  </div>
  
</div>