HTML实现简单ul菜单切换

原创已于 2023-02-02 13:34:48 修改 · 863 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

于 2022-09-08 15:41:54 首次发布

前端技术专栏收录该内容

18 篇文章

订阅专栏

这段代码展示了如何使用HTML构建一个多选项卡组件，通过CSS进行样式设计，并利用JavaScript实现点击选项卡切换内容的功能。选项卡包括基础信息、学习经历、工作经历等板块，点击每个选项卡会高亮当前选中项并显示相应内容。

实现效果
在这里插入图片描述
html部分

<div class="tabbox">
    <ul id="tabNav">
　　　　<li class="active">基础信息</li>
　　　　<li>学习经历</li>
　　　　<li>工作经历</li>
　　　　<li>培训经历</li>
　　　　<li>资质证书</li>
　　　　<li>社会关系</li>
　　</ul>
    <div class="content">
        <div id="jsjc" class="active"></div>
        <div id="xxjl"></div>
        <div id="gzjl"></div>
        <div id="pxjl"></div>
        <div id="zzzs"></div>
        <div id="shgx"></div>
    </div>
</div>

css部分

#tabNav{
    background: #ebebeb;
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-bottom: 0px;
}

.tabbox{
    overflow: hidden;
    font-size: 0px;/* li数量大于ul宽度浮动换行时存在错位，这个用来消除看不见的间隔 */
}
.tabbox ul{
    list-style:none;
    font-size;
}
.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;
}

js代码

$(".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");
	
	//获取选中的标题
    var tabName = $(this).text();
    console.log(tabName);
});