引导跳转到特定部分选项卡/列表组

Question

当来自外部链接或在外部链接的地址栏上键入时，我希望它跳转到特定部分，但似乎出了点问题。 它只显示页面顶部，而不是直接进入选项卡。

例如，我在浏览器上输入 1.1.1.1/page/#aa 以直接进入该特定部分并打开选项卡，但它只是位于顶部。

部分代码

<div class="container">
    <div class="row centered">
        <div class="col-lg-5 col-md-5 col-sm-8 col-xs-9 tab-container">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 tab-menu">
                <div class="list-group">
                    <a href="#aa" class="list-group-item active text-center">
                        <i class="fa fa-fa"></i><br/>Active
                    </a>
                    <a href="#bb" class="list-group-item text-center">
                        <i class="fa fa-fa"></i><br/>Inactive
                    </a>
                    <a href="#cc" class="list-group-item text-center">
                        <i class="fa fa-fa"></i><br/>More
                    </a>
                </div>
            </div>

JS

<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>

Answer 1

我已经修改了整个选项卡功能，使其更高效并避免重复代码（DRY）。问题是添加一个简单的.show() 命令是不够的，因为选项卡被分成单独的元素：按钮和内容 div。此外，div 没有 ID，而是通过 css 类 active 显示，并且按钮通过索引与内容对应。

编辑 2

更新了哈希更改检测并修复了位置滚动。 哈希检测有一个jQuery插件依赖：jquery-hashchange

<script>

$(document).ready(function() {

   var tabButtons = 'div.bhoechie-tab-menu>div.list-group>a';
   var tabContent = 'div.bhoechie-tab>div.bhoechie-tab-content';
   var tabElements = $(tabButtons+','+tabContent);

   // switch tab function 
   function switchTab(index) {
      tabElements.removeClass("active"); // remove active class from current/all tabs and buttons
      $(tabContent).eq(index).addClass("active"); // add active class to selected tab
   }

   // button click function
   $(tabButtons).click(function(e) {
     //e.preventDefault();
     var index = $(this).index(); // get index of clicked button
     switchTab(index); // call switch tab function
     $(this).addClass("active"); // add active class to clicked button
   });

   function hashTab() {
      // get URL Hash
      var hash = window.location.hash;
      // check if hash is set and not empty
      if (hash != '') {
         var hashLink = $('a[href="'+ hash +'"]') // find the button that corresponds with the hash
         switchTab(hashLink.index()); // call switch tab function based on HASH index
         hashLink.addClass('active'); // add active class to tab button

         // scroll to tabs container after 10ms delay
         setTimeout(function() {
            $(document).scrollTop( $("#aa").offset().top );
         }, 10);    

         // debugging
         console.log(hash);
         console.log(hashLink); 
         console.log(hashLink.index()); 
         console.log('#aa offset:'+ $("#aa").offset().top );
     }  
   }
   hashTab(); // fire hash tab function

   // detect hash change
   $(window).hashchange( function(){
      // alert( location.hash ); // debug hash change
      hashTab(); // call tab switch function
   })

});

</script>

代码已注释，但如果您有任何问题，请告诉我。

P.S 您可以删除不需要的控制台日志。

这段代码呢？ $（函数（）{ var hash = window.location.hash; // 获取哈希 if (hash != '' ) { // 确保设置了哈希 //警报（哈希）； //调试 $(哈希).show(); // 显示匹配哈希的选项卡 //滚动到标签位置： //$(document).scrollTop($(hash).offset().top); // 不工作？ location.href = location.hash； } }); 这可能需要额外的代码，但这是最简单的形式。试试看！