jquery Tab 选项卡切换
- 直接上代码,以下为最基本的选项卡切换
- 以下为效果图
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tab简单的选项卡切换</title>
</head>
<style>
.tab-box div{width:400px;height:300px;border:1px solid #000;display:none;}
/* 让第一个框显示出来 */
.tab-box div:first-Child{display:block;}
/* 改变选项卡选中时候的样式 */
.change{background:red;}
</style>
<body>
<table>
<div class="tab">
<div class="tab-menu">
<span>
<lable>新闻</lable>
<lable>娱乐</lable>
<lable>财经</lable>
<lable>八卦</lable>
</span>
</div>
<div class="tab-box">
<div>靠!奥巴马来我家了!!!^……^</div>
<div>听说,你昨天去整容了,小伙!</div>
<div>我昨天中了一个亿的彩票!</div>
<div>昨天梦见好多好多鱼,在我的床上游来游去!</div>
</div>
</div>
</table>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$(".tab-menu span lable").mouseover(function(){
//通过 .index()方法获取元素下标,从0开始,赋值给某个变量
var _index = $(this).index();
//让内容框的第 _index 个显示出来,其他的被隐藏
$(".tab-box>div").eq(_index).show().siblings().hide();
//改变选中时候的选项框的样式,移除其他几个选项的样式
$(this).addClass("change").siblings().removeClass("change");
});
});
</script>