Question

我过去几天一直试图制作导航栏，但我似乎遇到了很多问题。现在我的问题是jQuery，它没有按照我想要的方式运行：

我想要一个单页网站，所以每当我点击导航栏时，当前页面应该隐藏，目标页面应该显示。现在，有些页面仍然堆叠在一起，有人可以帮助我吗？

HTML代码

<!DOCTYPE html>
<html> 
    <head>
        <title>Yu-Gi-Oh! Stash</title>
        <link rel="stylesheet" type="text/css" href="styles/style.css">
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="scripts/contentcontroller.js"></script>
        <script src="scripts/navbar.js"></script>
        <meta charset="utf-8">
    </head>

    <body>        
        <section> 
            <nav>
                <ul>
                    <li class="active"><a href="#decks">Decks &blacktriangledown;</a>
                        <ul>
                            <li><a href="#decks_starter-decks">Starter Decks</a></li>
                            <li><a href="#decks_structure-decks">Structure Decks</a></li>
                        </ul>
                    </li>

                    <li><a href="#booster-packs">Booster Packs &blacktriangledown;</a>
                        <ul>
                            <li><a href="#booster-packs_booster-sets">Booster Sets</a></li>
                            <li><a href="#booster-packs_special-edition">Special Editions</a></li>
                            <li><a href="#booster-packs_duelist-packs">Duelist Packs</a></li>
                            <li><a href="#booster-packs_master-collections">Master Collections</a></li>
                        </ul>
                    </li>

                    <li><a href="#torunament-awards">Tournament Awards</a></li>

                    <li><a href="#promotions">Promotions &blacktriangledown;</a>
                        <ul>
                            <li><a href="#promotions_video-games">Video Games</a></li>
                            <li><a href="#promotions_entertainments">Entertainment</a></li>
                            <li><a href="#promotions_foundations">Foundations</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <section id="decks" class="tab-content active">
                <h1 class="page-heading">Decks</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="decks_starter-decks" class="tab-content hide">
                <h1 class="page-heading">Starter Decks</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="decks_structure-decks" class="tab-content hide">
                <h1 class="page-heading">Structure Decks</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="booster-packs" class="tab-content hide">
                <h1 class="page-heading">Booster Packs</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="booster-packs_booster-sets" class="tab-content hide">
                <h1 class="page-heading">Booster Sets</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="booster-packs_special-edition" class="tab-content hide">
                <h1 class="page-heading">Special Edition</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="booster-packs_duelist-packs" class="tab-content hide">
                <h1 class="page-heading">Duelist Packs</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="booster-packs_master-collections" class="tab-content hide">
                <h1 class="page-heading">Master Collections</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="torunament-awards" class="tab-content hide">
                <h1 class="page-heading">Tournament Awards</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="promotions" class="tab-content hide">
                <h1 class="page-heading">Promotions</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="promotions_video-games" class="tab-content hide">
                <h1 class="page-heading">Video Game Promotions</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="promotions_entertainments" class="tab-content hide">
                <h1 class="page-heading">Magazine, Movie & McDonalds Promotions</h1>

                <p>lorem ipsum..</p>
            </section>

            <section id="promotions_foundations" class="tab-content hide">
                <h1 class="page-heading">Foundations</h1>

                <p>lorem ipsum..</p>
            </section>
        </section>

        <footer>
        </footer>
    </body>
</html>

CSS代码

body, html {
    padding: 0;
    margin: 0;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
    padding: 0;
    margin: 35px 25px 25px 25px;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: capitalize;
}

section {
    padding: 0;
    margin: auto;
    width: 85%;
    height: 1000px;
    border-top: 1px solid #fff;
}

section section {
    border: none;
}

.page-heading {
    margin: 80px 0px 80px 0px;
    text-align: center;
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
    color: #06b;
}

/********************
 ***NAVIGATION BAR***
 ********************/
nav {
    position: fixed;
    width: inherit;
    margin: -1px 0px 0px -1px;
    list-style-type: none !important;
    background-color: #fff;
    border: 1px solid #aaa;
    border-top: none;

    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}

nav:after {
    clear: both;
}

nav ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 8px;
    padding-bottom: 0;
}

nav ul li {
    width: auto;
    position: relative;
    float: left;
    margin: 0 25px -1px 0;
    padding: 0;
}

nav ul li.active > a {
    color: #06b;
    border-color: #aaa #aaa #fff;
}

nav ul li:hover > a {
    background: #fff;
    border-color: #aaa #aaa #fff;
}

nav ul a:link, a:visited {
    display: block;
    color: #09c;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 15px;
    line-height: 32px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid;
    border-color: #eee #eee transparent;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0;
}

nav ul ul li {
    float: none;
    width: 150%;
    margin: 0;
    background-color: #fff;
}

nav ul ul a {
    line-height: 120%;
    padding: 10px 15px;
    border-top: none;
    border-color: #eee !important;

    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}

nav ul ul a:hover {
    border-color: #aaa !important;
}

nav ul ul ul {
    top: 0;
    left: 100%;
}

nav ul li:hover > ul {
    display: block;
}

/*************
 ***CONTENT***
 *************/
.tab-content.active {
    display: block;
}

.tab-content.hide {
    display: none;
}

jQuery代码

/***************************
 ***Navbar click function***
 ***************************/
$(document).ready(function() {
    $('nav li > a').click(function(event) {
        event.preventDefault();

        //declare current tab content
        var current_tab_content = $('nav li.active > a').attr('href');

        //hide current tab content
        $(current_tab_content).removeClass('active').addClass('hide');

        //show targeted tab content
        var targeted_tab_content = $(this).attr('href');
        $(targeted_tab_content).removeClass('hide').addClass('active');

        //remove 'active' from current navbar
        var current_navbar = $('nav li.active');
        $(current_navbar).removeClass('active');

        //add 'active' to clicked navbar
        $(this).parents('li').last().addClass('active');
    });
});

Answer 1

在点击几次导航后，您似乎最终会遇到多个“活动”类的部分。

首先尝试隐藏所有部分，然后显示所需的部分，而不是一次隐藏一个标签：

$('.tab-content').removeClass('active').addClass('hide');
$(targeted_tab_content).addClass('active').removeClass('hide');

其他建议

您可能只有一个而不是两个，默认所有内容都为display: none;，然后您只需删除/分配“有效”类。
show()和hide()还有一个jQuery函数可以在这里使用。

jQuery内容控制器不能正确显示和隐藏内容

1 个答案: