<html><head><meta charset="UTF-8"><title>选项卡</title><script type="text/javascript" src="jquery-1.10.2.min.js"></script></head><style>.tab{width:400px;height:400px;border:1px solid red;}.tab-menu{height:100px;width:400px;border:1px solid grey;}.tab-menu ul{list-style:none;}.tab-menu li{display:block;width:30%;float:left;border:1px solid blue;}.tab-box div{width:400px;height:300px;border:1px solid #ff4200;display:none;}/* 让第一个框显示出来 */.tab-box div:first-Child{display:block;} /* 改变选项卡选中时候的样式 */.change{background:red;} </style><script>$().ready(function(){ ???$(".tab-menu li").mouseover(function(){ ???//通过 .index()方法获取元素下标，从0开始，赋值给某个变量 ???????var _index = $(this).index(); ???//让内容框的第 _index 个显示出来，其他的被隐藏 ???????$(".tab-box>div").eq(_index).show().siblings().hide(); ???//改变选中时候的选项框的样式，移除其他几个选项的样式 ???$(this).addClass("change").siblings().removeClass("change"); ???});});</script><body> ???<div class="tab"> ???????<div class="tab-menu"> ???????????<ul> ???????????????<li>新服</li> ???????????????<li>爆服</li> ???????????????<li>大服</li> ???????????</ul> ???????</div> ???????<div class="tab-box"> ???????????<div>123</div> ???????????<div>456</div> ???????????<div>789</div> ???????</div> ???</div></body></html>Jquery实现简单选项卡
原文地址：https://www.cnblogs.com/kangshuai/p/9011648.html