1

I have implemented psulek's solution from here: Twitter Bootstrap - Tabs - URL doesn't change to allow a right hand nav section on all site pages to go to a page with nav tabs, and open the selected tab, e.g. clicking on Region Search link below takes you to index.html and selects/opens #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>

This works great except on index.html itself, the page with the tabs. This page also has the right hand nav section with the same links as above. If the Airport Search tab is active and you click on the Region Search link then the URL changes to /index.html#region-form but the Region tab does not activate. If I manually refresh/reload the page then the Region tab is activated.

How can I get the rh href links on index.html to 'work' automatically and activate the tab, e.g. I think I want to force a page reload of index.html when a link is clicked but am not sure of the best way to do it.

4

1 回答 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);
            }
        });
于 2014-02-19T18:23:03.747 回答