Question

这是我第二次提出一个问题，这个问题之前已被多次询问过，但遗憾的是我无法找到解决问题的方法。

我有一个导航栏，我想创建一个HTML网站，所以我正在尝试编写一个jQuery脚本来显示＆amp;隐藏我网站上的部分。我无法找到问题，为什么它不能独立工作，所以如果有人能帮助我吗？

HTML代码

<!DOCTYPE html>
<html> 
    <head>
        <title>Yu-Gi-Oh! Stash</title>
        <link rel="stylesheet" type="text/css" href="styles/style.css">
        <script src="scripts/contentcontroller.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>

        <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: 1px solid grey;
}

.page-heading {
    margin: 80px 0px 80px 0px;
    text-align: center;
    color: #505050;
    text-shadow: -1px -1px 0px #555;
}

/********************
 ***NAVIGATION BAR***
 ********************/
nav {
    position: fixed;
    width: inherit;
    margin: -2px 0px 0px -2px;
    list-style-type: none !important;
    background-color: #F0F0F0;
    border: 2px solid #E0E0E0;
    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 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-right: 25px;
    padding: 0;
    border: 1px solid #F0F0F0;
    border-bottom: none;
}

nav ul li.active > a {
    color: #00688B;
    background: #DDD;
}

nav ul li:hover > a {
    color: #00688B;
    background: #FFF;
}

nav ul a:link, a:visited {
    display: block;
    color: #0099CC;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 15px;
    line-height: 32px;
    padding: 0 15px;
    background-color: #F6F6F6;

    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 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: 125%;
    border-bottom: 1px solid #F0F0F0;
    border-top: none;
}

nav ul ul a {
    line-height: 120%;
    padding: 10px 15px;
}

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

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

/*************
 ***CONTENT***
 *************/
.tab-content.hide {
    display: none;
}

.tab-content.active {
    display: block;
}

jQuery代码

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

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

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

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

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

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

Answer 1

首先，您需要包含jQuery库。从jquery.com下载或只使用此

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

然后将选择器更改为：

$("nav li > a").click( ...

它应该有用。

Answer 2

您的代码中存在以下几个问题：

您正在使用immediate child selector（>）。 li不是nav的直接孩子，而是ul的直接孩子。

因为您尝试从点击的元素中获取href，我假设您要捕获a - 标记上的点击事件：

$('nav li > a').click(function(event){

这里选择器的问题相同：

var current_navbar = $('nav > li.active');

这应该是

var current_navbar = $('nav > ul > li.active');
//OR
var current_navbar = $('nav li.active');

另外，您将课程hide 和 active添加到targeted_tab_content。必须在此处删除课程hide：

$(targeted_tab_content).removeClass('hide');

<强> Demo

一些改进：

在jQuery中你可以chain methods（当然不是全部）。因此，您可以合并removeClass和addClass：

$(current_tab_content).removeClass('active').addClass('hide');

导航jQuery无法正常工作

2 个答案: