js如何实现选项卡高亮+内容切换

入冉心

已于 2023-10-11 09:03:42 修改

阅读量331

点赞数 2

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-10-06 21:06:15 首次发布

本文链接：https://blog.csdn.net/rr20060119/article/details/133621321

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了如何使用HTML和JavaScript在网页上创建一个具有动态切换功能的菜单系统，当用户点击不同菜单项时，对应的子内容会高亮显示并切换。通过CSS样式和自定义函数clic实现菜单项的选择效果。

摘要由CSDN通过智能技术生成

一、

有一个外层容器 <div class="outer">。
在外层容器中，有一个无序列表 <ul class="tab-tilte">，包含了三个菜单项（菜单一、菜单二、菜单三）。
在外层容器中，有一个 <div class="tab-content">，用于显示对应菜单项的内容。
内容部分使用了三个 <div> 元素，分别对应菜单一的内容、菜单二的内容和菜单三的内容，并且给它们分别设置了不同的id。

        <div class="outer">
			<ul class="tab-tilte">
				<li id="tab_1" class="tis" onclick="clic(this);">菜单一</li>
				<li id="tab_2" onclick="clic(this);">菜单二</li>
				<li id="tab_3" onclick="clic(this);">菜单三</li>
			</ul>
			<div class="tab-content">
				<div id="tab_1_one">内容一</div>
				<div id="tab_2_one" class="hide">内容二</div>
				<div id="tab_3_one" class="hide">内容三</div>
			</div>
        </div>

        //css部分
         #outer {
				width: 600px;
				height: 400px;
				margin: 0 auto;
				border: 1px solid #ccc;
			}

			ul li {

				margin: 0;
				padding: 0;
				list-style: none;
			}

			.tab-tilte {
				width: 99%;
			}

			.tab-tilte li {
				float: left;
				width: 25%;
				padding: 10px 0;
				text-align: center;
				background-color: #f4f4f4;
				cursor: pointer;
			}

			.tab-tilte .tis {
				background-color: #09f;
				color: #fff;
			}

			.tab-content div {
				width: 25%;
				line-height: 100px;
				text-align: center;
			}

			.hide {
				display: none;
			}

二、

定义了一个名为 clic 的函数，用于处理菜单项的点击事件。
在函数内部，首先通过 $(e).addClass("tis").siblings().removeClass("tis") 给当前点击的菜单项添加 tis 类，并移除其他兄弟菜单项的 tis 类。这样可以实现选中菜单项高亮显示的效果。
然后，通过 $(e).attr("id") 获取到当前点击菜单项的id属性值，再加上 "_one"，得到对应内容的id。
接下来，使用 $(check + "") 找到对应内容的元素，并移除它的 "hide" 类，同时给其他内容元素添加 "hide" 类。

            function clic(e) {
				$(e).addClass("tis").siblings().removeClass("tis");
				var check = "#" + $(e).attr("id") + "_one";
				$(check + "").removeClass("hide").siblings().addClass("hide");
			}

具体效果：