Question

来自index.html＆gt;使用主导航使用相应的导航按钮

打开text.html到特定选项卡（tab2或选项卡3）

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

非常感谢adriancarriger，如果我在test.html页面上，这是有效的如果我在另一个页面上像index.html那么无效

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

找到

代码

http://jsfiddle.net/thyt6gff/4/

脚本

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


});

Answer 1

<强> Fiddle

我做了这些改变：

您可以在顶级视图（主页，测试页和联系人）之间导航。
所有导航类都会正确更新。

有评论显示以下代码中的更改内容。

<强>的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>

Answer 2

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

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

2 个答案: