使用jquery实现选项卡切换效果

最新推荐文章于 2022-08-02 15:55:50 发布

初生的太阳丶

最新推荐文章于 2022-08-02 15:55:50 发布

阅读量2.2k

点赞数

分类专栏：前端技术文章标签： javascript jquery css

本文链接：https://blog.youkuaiyun.com/Strive279/article/details/120869438

版权

前端技术专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript创建一个可交互的导航栏，通过点击切换不同内容区块。通过简单的HTML结构和jQuery操作，实现实时的样式变化和内容隐藏/显示。

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

实现效果：
在这里插入图片描述
css代码

 		#tabNav{
            background: #ebebeb;
            width: 2000px;
            overflow: hidden;
            position: relative;
            text-align: center;
        }

        .tabbox{
            overflow: hidden;
        }
        .tabbox ul{
            width: 100%;
            list-style:none;
        }
        .tabbox ul li{
            float: left;
            line-height: 52px;
            border-right: 1px solid #dbdbdb;
            font-size: 14px;
            color: #000;
            cursor: pointer;
            width: 120px;
        }
        .tabbox ul li.active{
            background-color:#003f88;
            color:white;
            font-weight:bold;
        }
        .tabbox .content{
            padding:10px;
            margin-top: 0px;
            min-height: 100px;
        }
        .tabbox .content>div{
            display:none;
        }
        .tabbox .content>div.active{
            display:block;
        }

html代码

	<div class="tabbox">
       <ul id="tabNav">
   　　　　<li class="active">学习经历</li>
   　　　　<li>工作经历</li>
   　　　　<li>培训经历</li>
   　　　　<li>资质证书</li>
   　　　　<li>社会关系</li>
   　　</ul>
       <div class="content">
           <div class="active">111111</div>
           <div>222222</div>
           <div>333333</div>
           <div>444444</div>
           <div>555555</div>
       </div>
   </div>

js代码

$(function(){
	$(".tabbox li").click(function ()
    {
        //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
        $(this).addClass("active").siblings().removeClass("active");
        //获取选中元素的下标
        var index = $(this).index();
        $(this).parent().siblings().children().eq(index).addClass("active")
            .siblings().removeClass("active");
    });
})