Jquery 导航到带有选项卡的页面并通过导航链接激活特定选项卡

从index.html>使用主导航，使用相应的导航按钮将text.html打开到特定选项卡（选项卡2或选项卡3）

我不希望它跳下页面，我希望它只加载页面，更新突出显示的选项卡和选项卡内容

非常感谢adriancarriger，如果我在test.html页面上，这会起作用 如果我在另一个像index.html这样的页面上，什么都不起作用

nav > index.html  test.html  contact.html
                    tab1
                    tab2
                    tab3

找到代码

剧本

$(document).ready(function() { 

$('#menu li ul a').on('click', function(e)  {

    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs 
    $('.tabs ' + currentAttrValue).show().siblings().hide();

    //big thanks to adriancarriger, this works if i am on the test.html page
    //if i am on another page like index.html nothing works
    $('.tabs .tab-links li').removeClass('active');
    $('.tab-links a[href$="' + currentAttrValue + '"]').parent().addClass('active');

    e.preventDefault();
});


$('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).show().siblings().hide();


    // Change/remove current tab to active
         $(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
});


});

我做了以下改变：

您可以在顶级视图（主页、测试页和联系人）之间导航

所有导航类都会正确更新

下面的注释显示了代码中发生的更改

Javascript

$(document).ready(function () {

    // **Added** - Changes top level views
    $('#menu li a').on('click', function (e) {

        var currentViewValue = jQuery(this).attr('href').slice(0, -5);

        changeView(currentViewValue);
        if (currentViewValue == 'test') {
            $('#menu a[href$="over"]').addClass('current');
        }

        e.preventDefault();

    });

    $('#menu li ul a').on('click', function (e) {

        var currentAttrValue = jQuery(this).attr('href');


        // ** Added **
        changeView('test');
        $('#menu li ul a').removeClass('current');
        $(this).addClass('current');
        // **


        // Show/Hide Tabs 
        $('.tabs ' + currentAttrValue).show().siblings().hide();

        //big thanks to adriancarriger, this works if i am on the test.html page
        //if i am on another page like index.html nothing works
        $('.tabs .tab-links li').removeClass('active');
        $('.tab-links a[href$="' + currentAttrValue + '"]').parent().addClass('active');

        e.preventDefault();
    });


    $('.tabs .tab-links a').on('click', function (e) {
        var currentAttrValue = jQuery(this).attr('href');

        // ** Added ** => Updates main nav classes for Test Page tabs //
        $('#menu li ul a').removeClass('current');
        $('#menu li ul a[href$="' + currentAttrValue + '"]').addClass('current');

        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).show().siblings().hide();


        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });

    // **Added** - Dry Function to change top level views => Home, Test Page, Contact
    function changeView(currentViewValue) {
        $('#menu > li a').removeClass('current');
        $('#menu a[href$="' + currentViewValue + '.html"]').addClass('current');
        $('.content .view').hide();
        $('#' + currentViewValue).show();
    }

});

Html

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="header">
    <ul id="menu">
        <!-- ** Changed ** => Home has current class by default -->
        <li><a href="index.html" class="current">Home</a>

        </li>
        <!-- ** Changed ** => 
            -Removed -> Test Page does not have current class by default
            -Changed -> href points to test.html  -->
        <li> <a href="test.html">Test Page</a>

            <ul>
                <!-- ** Changed href to #over ** -->
                <li><a href="#over" class="current">Overview</a>

                </li>
                <li><a href="#tab1">tab 1</a>

                </li>
                <li><a href="#tab2">tab 2</a>

                </li>
                <li><a href="#tab3">tab 3</a>

                </li>
            </ul>
        </li>
        <li><a href="contact.html">Contact</a>

        </li>
    </ul>
</div>
<div class="content">
    <!-- Added Home View Section -->
    <section id="index" class="view">
        <div class="tab-content">
             <h2>Home View</h2>

            <p>Home view content.</p>
        </div>
    </section>
    <!-- ** Changed ** => Added id .page class and hidden by default -->
    <section id="test" class="view multilevel" style="display:none">
        <!-----tabs----->
        <div class="tabs">
            <ul class="tab-links">
                <li><a href="#tab1">tab 1</a>

                </li>
                <li><a href="#tab2">tab 2</a>

                </li>
                <li><a href="#tab3">tab 3</a>

                </li>
            </ul>
            <div class="tab-content">
                <!-- **Added ** => Overview section -->
                <div id="over" class="tab active">
                     <h2>Overview</h2>

                    <p>Overview text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor. Aliquam euismod at lectus non malesuada. Proin in luctus purus. Sed dictum leo vitae est gravida consequat.</p>
                </div>
                <!-- **Removed** => .active class -->
                <div id="tab1" class="tab">
                     <h2>tab 1</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor. Aliquam euismod at lectus non malesuada. Proin in luctus purus. Sed dictum leo vitae est gravida consequat.</p>
                </div>
                <div id="tab2" class="tab">
                     <h2>tab 2</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor. .</p>
                    <p>Aenean sit amet hendrerit ex, a viverra nisi. Vivamus augue neque, sollicitudin eget sem non, commodo cursus orci. Ut facilisis justo nec sapien aliquam, non malesuada tortor congue.</p>
                </div>
                <div id="tab3" class="tab">
                     <h2>tab 3</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor.</p>
                    <p>Aenean sit amet hendrerit ex, a viverra nisi. Vivamus augue neque, sollicitudin eget sem non, commodo cursus orci. Ut facilisis justo nec sapien aliquam, non malesuada tortor congue. Vivamus mollis accumsan maximus.</p>
                    <p>Integer velit lacus, placerat sit amet ornare sit amet, mattis non mi. Nulla faucibus tristique lectus id semper. Pellentesque porta libero a tempus pretium. Integer non ex at urna convallis accumsan eu id dui.</p>
                </div>
            </div>
        </div>
        <!----/tabs----->
    </section>
    <!-- ** Added ** => Contact View -->
    <section id="contact" class="view" style="display:none">
        <div class="tab-content">
             <h2>Contact View</h2>

            <p>Contact view content.</p>
        </div>
    </section>
</div>

主视图
主视图内容









概述
这里是概述文本。Lorem ipsum dolor sit amet，是一位杰出的献身者。马莱苏亚达·埃格斯塔斯（Maecenas Concetetur malesuada egestas）。但老李·亨德雷特是我的朋友。莫里斯和佩伦特斯·厄洛斯，亨德雷特·杜洛尔。阿利奎姆·尤伊斯莫德在非马利苏阿达广场。普罗因在绿脓杆菌中。leo vitae这句话是孕妇的口头禅

表1
Lorem ipsum dolor sit amet，是一位杰出的献身者。马莱苏亚达·埃格斯塔斯（Maecenas Concetetur malesuada egestas）。但老李·亨德雷特是我的朋友。莫里斯和佩伦特斯·厄洛斯，亨德雷特·杜洛尔。阿利奎姆·尤伊斯莫德在非马利苏阿达广场。普罗因在绿脓杆菌中。leo vitae这句话是孕妇的口头禅

表2
Lorem ipsum dolor sit amet，是一位杰出的献身者。马莱苏亚达·埃格斯塔斯（Maecenas Concetetur malesuada egestas）。但老李·亨德雷特是我的朋友。Mauris和pellentesque厄洛斯，hendrerit vehicula dolor

埃尼安坐在埃米特·亨德雷特前，一个维韦拉·尼西。奥古斯·内克万岁，索利西图丁·埃吉特·塞姆农，科莫多·库苏斯·奥奇。我们的设施只是一个不需要智慧的地方，而不是一个不需要智慧的地方

表3
Lorem ipsum dolor sit amet，是一位杰出的献身者。马莱苏亚达·埃格斯塔斯（Maecenas Concetetur malesuada egestas）。但老李·亨德雷特是我的朋友。莫里斯和佩伦特斯·厄洛斯，亨德雷特·杜洛尔

埃尼安坐在埃米特·亨德雷特前，一个维韦拉·尼西。奥古斯·内克万岁，索利西图丁·埃吉特·塞姆农，科莫多·库苏斯·奥奇。我们的设施只是一个不需要智慧的地方，而不是一个不需要智慧的地方。大伏毛猴

整数velit lacus，placerat sit amet或are sit amet，mattis non mi。这是一个很好的例子。自由之门的佩伦茨克音乐节。eu id dui时的整数非ex

联系人视图
联系查看内容

您必须执行jquery实现才能正确执行此操作。它允许您修改当前页面的历史记录条目。这意味着，如果页面中有5个选项卡，则可以使用“推送状态”修改历史记录条目，将所选选项卡id添加为参数。完成后，重新加载页面时，可以使用adriancarrigers方法将其转到所需的选项卡。

尝试使用

.load（）

？