jquery写的tab选项卡标签

【网页制作】

下载

新闻

文章

经常有些时候需要写选项卡功能，但很多新手直接写成id形式，或者是结构很不合理。

以下是随手写的一个例子，选项卡可多个同时存在。

<!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>jquery tab选项卡</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        ul,li{margin:0;padding: 0;list-style: none;font-size: 14px}
        .tab_out{
            border: 1px solid #96e2fb;
            width:600px;
            height:200px;
        }
        .tab_ul{
            height:28px;
            border-top:3px solid #d7f6fc;
            border-bottom:1px solid #96e2fb;
            background-color:#d7f6fc;
        }
        .tab_ul li{
            width:70px;
            text-align: center;
            height: 28px;
            line-height: 28px;
            float: left;
            margin-left:12px;
            cursor: pointer;
            color: #069
        }
        .tab_ul .on_li{
            border: 1px solid #96e2fb;
            border-bottom:none;
            background-color:#fff;
            color: #f60;
            font-weight: bold;
        }
        .tab_div{
            font: 12px/18px "宋体";
            margin:6px 4px;
            color: #333;
            display: none;
        }
    </style>
</head>
<body>
<div class="tab_out">
    <ul class="tab_ul">
        <li class="on_li">标题1</li>
        <li>标题2</li>
        <li>标题3</li>
    </ul>
    <div class="tab_div">标题1对应内容</div>
    <div class="tab_div">标题2对应内容</div>
    <div class="tab_div">标题3对应内容</div>
</div>
<div class="tab_out">
    <ul class="tab_ul">
        <li class="on_li">标题1</li>
    </ul>
    <div class="tab_div">标题1对应内容</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $(".tab_out").each(function(){
        var _this=$(this);
        var div=_this.find(".tab_div");div.eq(0).show();
        var li=_this.find(".tab_ul li");
        var l=li.size();
        if(l>1){
            var i=0;
            var t=setInterval(function(){i++;li.eq(i%l).mouseenter()},3000);
            _this.hover(function(){
                clearInterval(t);
            },function(){
                t=setInterval(function(){i++;li.eq(i%l).mouseenter()},3000);
            });
            li.each(function(){
                $(this).mouseenter(function(e){
                    $(this).addClass("on_li").siblings().removeAttr("class");
                    i=$(this).index();
                    div.hide().eq(i).fadeIn("fast");
                    e.stopPropagation();
                })
            })
        }
    })
})
</script>
</body>
</html>