href指向未在同一页面上激活的引导程序导航选项卡的链接

href links to Bootstrap nav tabs not activating on same page

本文关键字：引导程序 激活 导航 选项 链接 一页 href      更新时间：2023-09-26

我已经从这里实现了psulek的解决方案：Twitter Bootstrap-Tabs-URL dons'；t更改为允许所有网站页面上的右侧导航部分转到带有导航选项卡的页面，并打开所选选项卡，例如，单击下面的区域搜索链接将转到index.html并选择/打开#Region form

    <p><a href="index.html#airport-form" >Airport Search</a></p>
    <p><a href="index.html#postcode-form">Postcode Search</a></p>
    <p><a href="index.html#region-form">Region Search</a></p>

除了index.html本身，即带有选项卡的页面之外，这一功能非常好。此页面也有右侧导航部分，具有与上面相同的链接。如果"机场搜索"选项卡处于活动状态，并且您单击"区域搜索"链接，则URL将更改为/index.html#区域表单，但"区域"选项卡不会激活。如果手动刷新/重新加载页面，则会激活"区域"选项卡。

如何使index.html上的rh-href链接自动"工作"并激活选项卡，例如，我想在单击链接时强制重新加载index.html页面，但不确定最佳方法。

这里有一个通用的例子，它将用于导航药丸和导航选项卡允许任何链接也控制"页面上"导航的选项卡。

HTML

<a href="#aaa" class="control-tabs">Another Link a</a> 
<a href="#bbb" class="control-tabs">Another Link b</a>
<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

JS-

        // Javascript to enable link to tab
        var url = document.location.toString();
        console.log('url',url);
        if (url.match('#')) {
            var tid = url.split('#')[1];
            console.log('tid',tid);
            $('.nav a[href$=#'+tid+']').tab('show') ;
            window.scrollTo(0, 0);
        }
        // Change hash for page-reload
        $('.nav a').on('shown.bs.tab', function (e) {
            window.location.hash = e.target.hash;
            window.scrollTo(0, 0);
        })
        // other links to control tabs
        $(".control-tabs").click(function(){
            var url = $(this).attr('href');
            console.log('url',url);
            if (url.match('#')) {
                var tid = url.split('#')[1];
                console.log('tid',tid);
                $('.nav a[href$=#'+tid+']').tab('show') ;
                window.scrollTo(0, 0);
            }
        });
相关文章：