手风琴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
img{border: none;display: block;}
#acc {width: 640px; height: 140px;margin: 0 auto; }
#acc ul {border-left:1px solid #ddd ; height: 140px;position: relative;}
#acc ul li { width:50px; height: 138px; border: 1px solid #ddd;float: left; list-style: none; border-left: 0;
position: relative; overflow: hidden; }
#acc ul li.active { width: 434px; }
#acc ul li h3 { font-size: 14px;color: #000; font-weight:100; width: 14px; height: 98px; padding: 40px 18px 0; }
#acc ul li h3.active { background: #f42760; color: #fff; }
#acc ul li div {width: 383px; height: 138px; background: blue; position: absolute; top: 0; left: 50px; border-left:1px solid #ddd ; z-index: 0; }
#acc ul li img{ width: 383px; height: 138px; }
#acc ul li.last { position: absolute; top: 0; right: 0; }
</style>
</head>
<body>
<div id="acc">
<ul>
<li class="active">
<h3 class="active">红玫瑰</h3>
<div><img src="img/bg1.jpg"></div>
</li>
<li>
<h3>白玫瑰</h3>
<div><img src="img/bg2.jpg"></div>
</li>
<li>
<h3>白玫瑰</h3>
<div><img src="img/bg3.jpg"></div>
</li>
<li>
<h3>白玫瑰</h3>
<div><img src="img/bg4.jpg"></div>
</li>
<li class="last">
<h3>白玫瑰</h3>
<div><img src="img/bg5.jpg"></div>
</li>
</ul>
</div>
<script type="https://cdn.bootcss.com/jquery/1.4.3/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li").mouseenter(function(){
$(this).stop().animate({"width":"434px"},500)
.find("h3").addClass("active")
.end().siblings().stop().animate({"width":"50px"},500)
.find("h3").removeClass("active");
})
})
</script>
</body>
</html>
tab选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 499px;
height: 137px;
margin: 0 auto;
position: relative
}
.box ul {
width: 499px;
height: 31px;
background: #eee;
border: 1px solid #ff99dd
}
.box li {
width: 83px;
height: 30px;
float: left;
list-style: none;
line-height: 30px;
text-align: center
}
.box div {
width: 499px;
height: 96px;
border: 1px solid #ff99dd;
display: none
}
.box .oli {
background: #fff;
}
.box .test {
display: block
}
</style>
<body>
<div class="box">
<ul>
<li class="oli">家用电器</li>
<li>手机通讯</li>
<li>电脑数码</li>
<li>家具服饰</li>
<li>食品百货</li>
<li>图书图像</li>
</ul>
<div class="test">Household Electric Appliances</div>
<div>Mobile phone communication</div>
<div>Computer digital</div>
<div>Furniture and clothing</div>
<div>Food department store</div>
<div>Book image</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.4.3/jquery.js"></script>
<script>
$(function () {
$("li").click(function () {
$("li").eq($(this).index()).addClass("oli").siblings().removeClass("oli")
$(".box div").eq($(this).index()).addClass("test").siblings().removeClass("test")
})
})
</script>
</html>
