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

本文介绍了一种使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值