一、
- 有一个外层容器
<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"); }
具体效果：
