经典选项卡

演示

选项卡-Download by http://www.codefans.net

1111 2222 3333 4444
  • 1111111111111111111111
  • 22222222222222222
  • 333333333333333333333
  • 444444444444444444

代码

<!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>选项卡-Download by http://www.codefans.net</title>
<script type="text/javascript" src="common/jquery132min.js"></script>
<link type="text/css" rel="stylesheet" href="common/common.css" />
<style type="text/css">
/* 选项卡 */
.tab{width:500px;border:#ccc 1px solid;margin:100px;}
.tab dl dt{ border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1; margin-bottom:-1px;}
.tab dl dt a{float:left;display:block;cursor:pointer;width:60px;height:25px;line-height:25px;text-align:center;background:#f1f1f1;color:#000;}
.tab dl dt a.tabActive{background:#fff;color:#333;font-weight:bold;border-bottom:1px solid #fff;position:relative;border-right:1px solid #ccc;border-left:1px solid #ccc;}
.tab dl dd{padding:10px;height:200px; clear:both;}
</style>
</head>
<body>

<script type="text/javascript">
// 选项卡
$(function(){
    $(".tab dl dt>a:first").addClass("tabActive");
    $(".tab dl dd ul").not(":first").hide();
    $(".tab dl dt>a").unbind("click").bind("click", function(){
        $(this).siblings("a").removeClass("tabActive").end().addClass("tabActive");
        var index = $(".tab dl dt>a").index( $(this) );
        $(".tab dl dd ul").eq(index).siblings(".tab dl dd ul").hide().end().fadeIn("slow");
   });
});
</script>

<script type="text/javascript">
// 自动轮换选项卡
$(document).ready(function(){
 $('.tab dl dt a:first').addClass('tabActive');
 $('.tab dl dd ul:first').css('display','block');
 autoroll();
 hookThumb();
});
var i=-1; //第i+1个tab开始
var offset = 2500; //轮换时间
var timer = null;
function autoroll(){
 n = $('.tab dl dt a').length-1;
 i++;
 if(i > n){
 i = 0;
 }
 slide(i);
    timer = window.setTimeout(autoroll, offset);
 }
function slide(i){
 $('.tab dl dt a').eq(i).addClass('tabActive').siblings().removeClass('tabActive');
 $('.tab dl dd ul').eq(i).fadeIn("slow").siblings('.tab dl dd ul').hide();
 }
function hookThumb(){    
 $('.tab dl dt a').hover(
  function () {
    if (timer) {
                clearTimeout(timer);
    i = $(this).prevAll().length;
             slide(i); 
            }
  },
  function () {
            timer = window.setTimeout(autoroll, offset);  
            this.blur();            
            return false;
  }
); 
}
</script>
<!-- 选项卡 -->
<div class="tab">
    <dl>
        <dt><a>1111</a><a>2222</a><a>3333</a><a>4444</a></dt>
        <dd>
            <ul>1111111111111111111111</ul>
            <ul>22222222222222222</ul>
            <ul>333333333333333333333</ul>
            <ul>444444444444444444</ul>
         </dd>
    </dl>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/banbu/archive/2012/08/25/2657017.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值