首页 > 代码库 > 搞定tab标签切换效果
搞定tab标签切换效果
搞定tab标签切换效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搞定tab标签切换效果</title>
<style>
*{ margin:0; padding:0;list-style: none;}
body {font:12px/1.5 Tahoma;}
#big{border: 1px solid blue;width: 1180px;height: 500px;margin: 0 auto;}
#outer {width:240px;float: left;}
#tab {overflow:hidden;zoom:1;background:#34A00C;border:1px solid #000;}
#tab li {float:left;color:#fff;height:50px; width:450px;cursor:pointer; line-height:50px;font-size:18px;padding-left: 20px;}
#tab li.current {color:#fff;background:#FA8700;font-weight:bolder;}
#content {border:1px solid #000;width: 910px;height: 500px;float: left;margin-left: 28px;padding: 0;}
#content ul {display:none;padding:10px 0;}
#content li{border: 1px solid #ccc;height:172px;width: 210px;float: left;
margin:0 20px 50px 0;padding: 4px;}
#content li:hover{border: 1px solid #34A00C;}
#content img{width: 210px;height: 172px;}
</style>
</head>
<body>
<!-- html代码begin -->
<div id="big">
<div id="outer">
<ul id="tab">
<li class="current">农村生活污水处理</li>
<li>城镇生活污水处理</li>
<li>养殖污水处理</li>
<li>食品污水处理</li>
<li>医药污水处理</li>
<li>化工污水处理</li>
<li>医院污水处理</li>
<li>印染污水处理</li>
</ul>
</div>
<div id="content">
<ul style="display:block;">
<li><a href=""><img src="http://www.mamicode.com/image/nongcun/1.jpg"><span>农村生活污水处理</span></a></li>
<li><img src="http://www.mamicode.com/image/nongcun/2.jpg"></li>
<li><img src="http://www.mamicode.com/image/nongcun/3.jpg"></li>
<li><img src="http://www.mamicode.com/image/nongcun/4.jpg"></li>
<li><img src="http://www.mamicode.com/image/nongcun/5.jpg"></li>
<li><img src="http://www.mamicode.com/image/nongcun/6.jpg"></li>
</ul>
<ul>
<li><img src="http://www.mamicode.com/image/chengzhen/1.jpg"></li>
<li><img src="http://www.mamicode.com/image/chengzhen/2.jpg"></li>
<li><img src="http://www.mamicode.com/image/chengzhen/3.jpg"></li>
<li><img src="http://www.mamicode.com/image/chengzhen/4.jpg"></li>
<li><img src="http://www.mamicode.com/image/chengzhen/5.jpg"></li>
<li><img src="http://www.mamicode.com/image/chengzhen/6.jpg"></li>
</ul>
<ul>
<li><img src="http://www.mamicode.com/image/yangzhi/1.jpg"></li>
<li><img src="http://www.mamicode.com/image/yangzhi/2.jpg"></li>
<li><img src="http://www.mamicode.com/image/yangzhi/3.jpg"></li>
<li><img src="http://www.mamicode.com/image/yangzhi/4.jpg"></li>
<li><img src="http://www.mamicode.com/image/yangzhi/5.jpg"></li>
<li><img src="http://www.mamicode.com/image/yangzhi/6.jpg"></li>
</ul>
<ul>
<li><img src="http://www.mamicode.com/image/shipin/1.jpg"></li>
<li><img src="http://www.mamicode.com/image/shipin/2.jpg"></li>
<li><img src="http://www.mamicode.com/image/shipin/3.jpg"></li>
<li><img src="http://www.mamicode.com/image/shipin/4.jpg"></li>
<li><img src="http://www.mamicode.com/image/shipin/5.jpg"></li>
<li><img src="http://www.mamicode.com/image/shipin/6.jpg"></li>
</ul>
<ul>
<li><img src="http://www.mamicode.com/image/yiyao/1.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyao/2.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyao/3.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyao/4.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyao/5.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyao/6.jpg"></li>
</ul>
<ul>
<li><img src="http://www.mamicode.com/image/huagong/1.jpg"></li>
<li><img src="http://www.mamicode.com/image/huagong/2.jpg"></li>
<li><img src="http://www.mamicode.com/image/huagong/3.jpg"></li>
<li><img src="http://www.mamicode.com/image/huagong/4.jpg"></li>
<li><img src="http://www.mamicode.com/image/huagong/5.jpg"></li>
<li><img src="http://www.mamicode.com/image/huagong/6.jpg"></li>
</ul>
<ul>
<li><img src="http://www.mamicode.com/image/yiyuan/1.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyuan/2.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyuan/3.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyuan/4.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyuan/5.jpg"></li>
<li><img src="http://www.mamicode.com/image/yiyuan/6.jpg"></li>
</ul>
<ul>
<li><img src="http://www.mamicode.com/image/yinran/1.jpg"></li>
<li><img src="http://www.mamicode.com/image/yinran/2.jpg"></li>
<li><img src="http://www.mamicode.com/image/yinran/3.jpg"></li>
<li><img src="http://www.mamicode.com/image/yinran/4.jpg"></li>
<li><img src="http://www.mamicode.com/image/yinran/5.jpg"></li>
<li><img src="http://www.mamicode.com/image/yinran/6.jpg"></li>
</ul>
</div>
</div>
<!-- html代码end -->
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
window.onload = function()
{
var $li = $(‘#tab li‘);
var $ul = $(‘#content ul‘);
$li.mouseover(function(){
var $this = $(this);
var $t = $this.index();
$li.removeClass();
$this.addClass(‘current‘);
$ul.css(‘display‘,‘none‘);
$ul.eq($t).css(‘display‘,‘block‘);
})
}
});
</script>
</body>
</html>
<style>* { margin: 0; padding: 0; list-style: none } body { font: 12px/1.5 Tahoma } #big { border: 1px solid blue; width: 1100px; height: 500px; margin: 0 auto } #outer { width: 240px; float: left } #tab { overflow: hidden; background: #34A00C; border: 1px solid #000 } #tab li { float: left; color: #fff; height: 50px; width: 450px; cursor: pointer; line-height: 50px; font-size: 18px; padding-left: 20px } #tab li.current { color: #fff; background: #FA8700; font-weight: bolder } #content { border: 1px solid #000; width: 910px; height: 500px; float: left; margin-left: 28px; padding: 0 } #content ul { display: none; padding: 10px 0 } #content li { border: 1px solid #ccc; height: 172px; width: 210px; float: left; margin: 0 20px 50px 0; padding: 4px } #content li:hover { border: 1px solid #34A00C } #content img { width: 210px; height: 172px }</style>
搞定tab标签切换效果