jquery 点击导航显示二级栏目其余导航二级隐藏

原创

mob64ca12df5e97 2024-11-12 05:08:46 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12df5e97的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery实现点击导航显示二级栏目其余导航二级隐藏

在现代网页设计中，导航栏是用户体验的重要组成部分。动态显示和隐藏二级导航栏可以帮助用户更高效地浏览网站的内容。本文将通过一个简单的示例来展示如何使用jQuery实现点击导航显示二级栏目而隐藏其他导航的功能。

一、基本结构

我们首先需要创建HTML页面结构。我们将构建一个包含主导航和二级导航的简单示例。以下是HTML的基本结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航示例</title>
    <link rel="stylesheet" href="styles.css">
    <script src="
</head>
<body>
    <ul class="main-nav">
        <li data-show="sub1">导航1</li>
        <li data-show="sub2">导航2</li>
        <li data-show="sub3">导航3</li>
    </ul>

    <div class="sub-nav">
        <ul id="sub1" class="sub-list" style="display:none;">
            <li>二级栏目1-1</li>
            <li>二级栏目1-2</li>
        </ul>
        <ul id="sub2" class="sub-list" style="display:none;">
            <li>二级栏目2-1</li>
            <li>二级栏目2-2</li>
        </ul>
        <ul id="sub3" class="sub-list" style="display:none;">
            <li>二级栏目3-1</li>
            <li>二级栏目3-2</li>
        </ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

二、CSS样式

为了让导航更具可读性，我们需要一些基本的CSS样式。以下是样式的示例：

body {
    font-family: Arial, sans-serif;
}

.main-nav {
    list-style-type: none;
    padding: 0;
}

.main-nav li {
    display: inline;
    margin: 0 15px;
    cursor: pointer;
}

.sub-list {
    list-style-type: none;
    padding: 0;
}

三、jQuery脚本

在这个部分，我们将编写jQuery脚本来实现点击主导航时显示相应的二级导航，并隐藏其他的二级导航。以下是脚本的代码：

$(document).ready(function() {
    $('.main-nav li').click(function() {
        // 获取data-show属性的值
        var target = $(this).data('show');
        
        // 隐藏所有二级导航
        $('.sub-list').hide();
        
        // 显示当前点击的二级导航
        $('#' + target).show();
    });
});

四、效果展示

如上面的设计，用户每次点击主导航时，会看到相关的二级栏目显示，而其他的二级栏目则会被隐藏。这种设计能够有效减少页面的复杂性，提高用户的操作效率。

五、甘特图展示

为了进一步理解整个实现过程，我们可以使用甘特图展示项目进度。以下是用Mermaid语法表示的甘特图：

gantt
    title 导航实现项目进度
    dateFormat  YYYY-MM-DD
    section 设定需求
    需求分析           :a1, 2023-10-01, 10d
    设计结构           :after a1  , 5d
    section 实现功能
    编写HTML           :2023-10-12  , 5d
    编写CSS            :2023-10-12  , 3d
    jQuery实现功能     :2023-10-15  , 5d