Question

我已经从这里实现了psulek的解决方案：Twitter Bootstrap - Tabs - URL doesn't change允许所有网站页面上的右手导航部分转到带有导航标签的页面，然后打开所选标签，例如单击下面的“区域搜索”链接可转到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#region-form，但“区域”选项卡不会激活。如果我手动刷新/重新加载页面，则会激活“区域”选项卡。

如何让index.html上的rh href链接自动“工作”并激活选项卡，例如我想我想在点击一个链接时强制重新加载index.html，但我不确定最好的方法。

Answer 1

这是一个通用示例，可以使用nav-pills和nav-tabs 允许任何链接也控制“页面上”导航的标签。

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);
            }
        });

href链接到Bootstrap导航选项卡未在同一页面上激活

1 个答案: