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您可以删除不需要的控制台日志。

<德尔> 这段代码怎么样？ $（function（）{ var hash = window.location.hash; //得哈希 if（hash！=＆＃39;＆＃39;）{//确保设置了哈希值 //警报（散列）; //调试 $（散）.show（）; //显示与哈希匹配的选项卡 //滚动到标签位置： // $（document）.scrollTop（$（hash）.offset（）。top）; //不工作？ location.href = location.hash; } }）; 这可能需要额外的代码，但这是最简单的形式。试试看！

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

1 个答案:

编辑2