2018-11-01 使用jQuery实现Tab选项卡
2018-11-01 本文已影响0人
Android砖家
jQuery中文文档 :http://jquery.cuishifeng.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用jQuery实现Tab选项卡</title>
<script src="js/jquery-1.6.4/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 440px;
height: 298px;
border: 1px solid #000;
margin: 50px auto;
}
.nav > li {
list-style: none;
width: 110px;
height: 50px;
background-color: orange;
text-align: center;
line-height: 50px;
float: left;
}
.box .content li {
list-style: none;
width: 440px;
height: 248px;
float: left;
display: none;
}
.box .content > .show{
display: block;
}
.box .content li > img{
width: 440px;
height: 248px;
}
/* */
.nav .current-index {
background: #ccc;
}
</style>
<script>
$(function () {
//tab变色
$(".nav>li").mouseenter(function () {
//修改被移入选项卡的背景颜色
$(this).addClass("current-index");
//siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。 (反选)
$(this).siblings().removeClass("current-index");
//获取当前选中索引
var index = $(this).index();
//根据索引找到对应的图片
var $li=$(".content>li").eq(index);
//显示对应的图片
$li.addClass("show");
//隐藏其他对应的图片
$li.siblings().removeClass("show");
});
})
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current-index">美女1</li>
<li>美女2</li>
<li>美女3</li>
<li>美女4</li>
</ul>
<ul class="content">
<li class="show"><img src="../images/banner01.jpg" alt=""></li>
<li><img src="../images/banner02.jpg" alt=""></li>
<li><img src="../images/banner03.jpg" alt=""></li>
<li><img src="../images/banner04.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
效果图：
yhx.gif
