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

入冉心

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

阅读量456

点赞数 2

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

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

本文链接：https://blog.youkuaiyun.com/rr20060119/article/details/133621321

版权

一、

有一个外层容器 <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" cla