个人中心
gpt4 book ai didi

jquery - 导航 jQuery 不工作

转载 作者：行者123 更新时间：2023-11-28 07:39:56 25 4
gpt4 key购买 nike

这是我第二次问一个问题，之前已经问过很多次了，但不幸的是我一直找不到解决问题的方法。

我有一个导航栏，我想制作一个 HTML 网站，所以我正在尝试编写一个 jQuery 脚本来显示和隐藏我网站上的部分。我找不到问题为什么它不能自己工作，所以如果有人可以帮助我吗？

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');
    });
});

最佳答案

您的代码中存在几个问题:

您正在使用 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 - 导航 jQuery 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30999137/

25 4 0
文章推荐： html - 我可以限制元素相对于其父元素的宽度吗？
文章推荐： ios - UICollectionViewCell 有 2 个单元格，每个单元格的高度为 "wrap_content"
文章推荐： css - 单击 HTML 页面上的按钮后渐变填充 SVG
文章推荐： javascript - 扩展 div 的背景宽度以包括浏览器宽度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com