您的位置：首页 > 其它

web实战(三)— — Tab选项卡切换效果

2016-04-19 22:45 471 查看

参考慕课网教程《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();
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航