首页 文章

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

提问于
浏览 次
0

我已经从这里实现了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，但我不确定最好的方法 .

javascript twitter-bootstrap tabs nav

1 回答

  • 0

    这是一个通用示例，可以使用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);
            }
        });
    回复于

相关问题