jquery实现html页面的导航的标签内容切换

最新推荐文章于 2025-06-19 12:40:23 发布

原创最新推荐文章于 2025-06-19 12:40:23 发布 · 1.3w 阅读

34 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的导航栏切换效果。通过为不同的导航项（li元素）添加点击事件，使得与之对应的页面内容（div元素）能够显示或隐藏。此效果通过为当前导航项添加'selected'类并移除其他导航项的此类来实现唯一选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：

导航栏的ul li 都对应的一个div，每个li单机时候添加属性，并且与之对应的div展示。

主要是利用jquery的一些方法进行操作；

<ul class="switch">
    <li class="selected">导航一</li>
    <li>导航二</li>
    <li>导航三</li>
</ul>
<div class="content">
    <div>内容一</div>
    <div style="display: none">内容二</div>
    <div style="display: none">内容三</div>
</div>
<script>
    $(function(){
        /*单机切换*/
        $(".switch  li").click(
                function(){
                    /*每个li下属的div*/
                    var divShow = $(".content").children("div");
                    /*利用selected进行判断*/
                    if(!$(this).hasClass("selected")){
                    /*li标签的顺序和div的顺序是对应的，获取索引*/
                        var index = $(this).index();
                        /*当前对象设置class属性*/
                        $(this).addClass("selected");
                        /*移除其他同级元素属性*/
                        $(this).siblings("li").removeClass("selected");
                        /*展示当前li对应的div内容,利用方法显示和隐藏*/
                        $(divShow[index]).show();
                        /*隐藏同级元素*/
                        $(divShow[index]).siblings("div").hide();
                    }
                }
        )
    })
</script>