<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab选项卡</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-family:'微软雅黑';}
ul,ul li{ list-style:none;}
/* topmenu */
#topmenu{width:450px;margin:30px auto 0 auto;height:80px;position:relative;}
#topmenu ul{margin:0;padding:0;}
#topmenu ul li{float:left;font-size:12px;background:#222;position:relative;text-align:center;width:70px;margin:0 10px;display:inline;line-height:30px;}
#topmenu ul li a{color:#aaa;text-decoration:none;}
#topmenu ul li a:hover{color:#fff;}
#topmenu ul li.active a{color:#fff;font-weight:800;}
/* tab */
.tab{width:430px;margin:30px auto;border:1px solid #ccc;}
.tab ul.menu{height:34px;background:#f6f6f6;position:relative;}
.tab ul.menu li{float:left;text-align:center;width:120px;height:34px;background:#f6f6f6;line-height:32px;list-style:none;font-size:12px;cursor:pointer;}
.tab ul.menu li.active{background:#848484;color:#fff;}
.con1,.con2,.con3{height:190px;border-top:2px solid #848484;}
.con2,.con3{display:none;}
.con1 ul,.con2 ul,.con3 ul{padding:5px;}
.con1 ul li,.con2 ul li,.con3 ul li{background:url(images/point.png) no-repeat left center;padding:0 0 0 10px;font-size:14px;line-height:180%;color:#252525;}
.con1 ul li:hover,.con2 ul li:hover,.con3 ul li:hover{color:#ba2636;cursor:pointer;text-decoration:underline;}
.line{height:2px;width:120px;background:red;position:absolute;bottom:-2px;}
</style>
</head>
<body>
<script type="text/javascript">
$(function () {
$('.tab ul.menu li').hover(function(){
//获得当前被点击的元素索引值
var Index = $(this).index();
var line=120*Index-120;
//给菜单添加选择样式
$(this).addClass('active').siblings().removeClass('active');
$(".line").stop(true,true).animate({left:line},200);
//显示对应的div
$('.tab').children('div').eq(Index).show().siblings('div').hide();
});
});
</script>
<div id="topmenu">
<ul>
<li class="active"><a href="demo.html">实例一</a></li>
<li><a href="demo2.html">实例二</a></li>
<li><a href="demo3.html">实例三</a></li>
<li><a href="demo4.html">实例四</a></li>
<li><a href="demo5.html">实例五</a></li>
</ul>
</div>
<div class="tab">
<ul class="menu">
<div class="line"></div>
<li class="active">新闻</li>
<li>娱乐</li>
<li>图片</li>
</ul>
<div class="con1">
<ul>
<li>习近平视察沈飞集团 坐进歼-15机舱(图)</li>
<li>十八大后9名高官被查 石油系反腐 人物图谱</li>
<li>美证据指叙政府使用沙林毒气 北约12国拒出兵</li>
<li>上海液氨泄漏死者多是外来女工 博览会 群众</li>
<li>重庆追认被周克华枪杀铁警朱彦超为烈士(图)</li>
<li>受审贪官自称遭刑讯:被打2000耳光 鸡奸3次</li>
<li>村支书性侵留守妇女 称村里一半都是我的娃</li>
</ul>
</div>
<div class="con2">
<ul>
<li>日本军人女歌手出专辑走红 被赞美丽过头(图)</li>
<li>十八大后9名高官被查 石油系反腐 人物图谱</li>
<li>美证据指叙政府使用沙林毒气 北约12国拒出兵</li>
<li>上海液氨泄漏死者多是外来女工 博览会 群众</li>
<li>重庆追认被周克华枪杀铁警朱彦超为烈士(图)</li>
<li>受审贪官自称遭刑讯:被打2000耳光 鸡奸3次</li>
<li>村支书性侵留守妇女 称村里一半都是我的娃</li>
</ul>
</div>
<div class="con3">
<ul>
<li>奥巴马拒绝俄方郊外住宿安排 要求住市中心</li>
<li>5岁男孩在京驾机盘旋 85岁孪生姐妹终身不嫁</li>
<li>易奇闻:实拍巨蟒树上活吞重达12斤猴子(图)</li>
<li>日本军人女歌手出专辑走红 被赞美丽过头(图)</li>
<li>42岁女子恋爱谎称23岁 闺蜜索封口费被锤杀</li>
<li>18岁少女79刀刺死生母 "色猫"调戏女主人求吻</li>
<li>日本军人女歌手出专辑走红 被赞美丽过头(图)</li>
</ul>
</div>
</div>
</body>
</html>
5种简单的jquery tab选项卡切换样式_文字新闻列表选项卡切换样式
需积分: 50 197 浏览量
2015-07-20
17:23:36
上传
评论
收藏 37KB ZIP 举报
tab选项卡.zip （8个子文件） 
images 
Thumbs.db 3KB
point.png 129B
demo2.html 4KB js jquery-1.4.2.min.js 78KB demo5.html 4KB demo4.html 4KB demo.html 4KB demo3.html 4KB资源评论
qq_29406525
- 粉丝: 0
- 资源: 1
