参考慕课网教程《Tab选项卡切换效果》：http://www.imooc.com/learn/176
基本功能有延迟切换、自动切换。本文用jquery实现
1、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab标签切换</title>
<link href="css/tabswitch.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery-1.12.1.js"></script>
</head>
<body>
<div>
<div class="notice">
<!-- 上面的标题栏 -->
<div class="notice-title">
<ul>
<li class="title-item select"><a href="#">公告</a></li>
<li class="title-item"><a href="#">规则</a></li>
<li class="title-item"><a href="#">论坛</a></li>
<li class="title-item"><a href="#">安全</a></li>
<li class="title-item"><a href="#">公益</a></li>
</ul>
</div>
<!-- 下面的内容部分 -->
<div class="notice-content">
<!-- 第一个内容模块 -->
<div class="module">
<ul>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">阿里2000万驰援灾区！</a></li>
<li><a href="#">旅游宝让你边玩边赚钱</a></li>
<li><a href="#">多行跟进阿里信用贷款</a></li>
</ul>
</div>
<div class="module">
<ul>
<li><span>[<a href="#">通知</a>]</span><a href="#">"滥发"即将换新</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">比特币严管啦！</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">禁发商品名录!</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">商品属性限制</a></li>
</ul>
</div>
<div class="module">
<ul>
<li><span>[<a href="#">聚焦</a>]</span><a href="#">金牌卖家再启航</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">橱窗规则升级啦</a></li>
<li><span>[<a href="#">话题</a>]</span><a href="#">又爱又恨优惠劵</a></li>
<li><span>[<a href="#">工具</a>]</span><a href="#">购后送店铺红</a></li>
</ul>
</div>
<div class="module">
<ul>
<li><a href="#">个人重要信息要管牢</a></li>
<li><a href="#">卖家防范红包欺诈提醒！</a></li>
<li><a href="#">更换收货地址的陷阱</a></li>
<li><a href="#">注意骗子的技术升级了</a></li>
</ul>
</div>
<div class="module">
<ul>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">淘宝大众评审赢公益金！</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/tabswitch.js"></script>
</body>
</html>2、css（格式为了节省空间）
/*取消默认样式*/
* { padding: 0; margin: 0; list-style: none; font-size: 12px; }
.notice { /*整个div长宽为300 * 100*/ width: 298px; height: 98px; margin: 10px; border: 1px solid #eee; overflow: hidden; }
.notice-title { /*标题的样式*/ height: 27px; position: relative; background-color: #F7F7F7; }
.notice-title ul { /* absolute + left */ position: absolute; width: 300px; left: -1px; /*往左移1px，因为li左右边有border边框*/ }
.notice-title ul li { float: left; width: 58px; /*58+padding的2像素*/ height: 26px; line-height: 26px; text-align: center; overflow: hidden; background-color: #F7F7F7; border-bottom: 1px solid #eee; padding: 0 1px; /*左右边padding一个像素*/ }
.notice-title ul li.select { background: #FFF; border-bottom-color: #FFF; /*下面border置白*/ border-left: 1px solid #ccc; /*左右边border*/ border-right: 1px solid #ccc; padding: 0; font-weight: bolder; }
.notice li a:link, .notice li a:visited {/*清除默认下划线和设置默认字体颜色*/ text-decoration: none; color: #000; }
.notice li a:hover { color: #F90; }/*划过的样式*/
.notice-content .module { margin: 10px 6px; }
.notice-content .module ul li { float: left; width: 143px; /*(298-6*2)/2*/ height: 25px; overflow: hidden; }
3、js
//实现方式一(hover)
//$(function() {
//
// //将除了第一div隐藏
// $('.module:not(:first)').hide();
//
// $('.title-item').hover(function(e){
// $('.title-item').removeClass('select');//清除所有的select样式
// $(this).addClass('select');//当前加上select样式
// //console.log($(this).index());
// $('.module').hide();
// $('.module').eq($(this).index()).show();//显示对应div
// },function(){
//
// });
//});
//实现方式二(setTimeout、mouseover和mouseout)【延迟切换】
//var timeOutId;//延迟时间
//$(function() {
// //初始化
// $('.module:not(:first)').hide();//隐藏第一个module的之外的div
//
// $('.notice-title li').each(function(index){
// $(this).mouseover(function() {
// timeOutId = setTimeout(function () {
// $('.module').hide();//隐藏所有module的div
// $('.module').eq(index).show();
// $('.title-item').removeClass('select');//清除所有的select样式
// $('.title-item').eq(index).addClass('select');
// }, 300);
// }).mouseout(function(){
// clearTimeout(timeOutId);
// });
// })
//});
//实现方式三【自动轮播】
var index = 0;//默认index为0
var timer = null;
var hasStarted = false; //是否已经开始轮播
$(function () {
//初始化
$('.module:not(:first)').hide();//隐藏第一个module的之外的div
start();//开启自动轮播
//划过整个区域时停止轮播
$('.notice').hover(function () {
stop();//停止
}, function () {
start();//离开整个区域是开启轮播
})
//划过li时
$('.title-item').hover(function (e) {
$('.title-item').removeClass('select');//清除所有的select样式
$(this).addClass('select');//当前加上select样式
index = $(this).index();//改变index值
//console.log($(this).index());
$('.module').hide();
$('.module').eq(index).show();//显示对应div
}, function () {
});
});
function start() {
if (!hasStarted) {
hasStarted = true;
timer = setInterval(autoPlay, 2000);
}
}
function stop() {
clearInterval(timer);
hasStarted = false;
}
function autoPlay() {
++index;
if (index > 4) {
index = 0;//复位
}
//console.log(index);
//上面title轮播
$('.title-item').removeClass('select');//清除所有select样式
$('.title-item').eq(index).addClass('select');
//下面内容轮播
$('.module').hide();
$('.module').eq(index).show();
}