tab选项卡

如图，选项卡效果

代码：<!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" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>tab标签页面切换见效果</title>
    <script type='text/javascript' src='./jquery/jquery-1.10.2.min.js'></script>
    <style>
        #tab1{
            border:1px solid #ccc;
            border-radius:3px;
            width:660px;
            height:254px;
            margin:0 auto;
            font-family:微软雅黑,consolas;
            font-size:12px;
        }
        #tab1 .tab-nav{
            background:#eee;
            width:100%;
            height:31px;
            line-height:31px;
            border-bottom:1px solid #ccc;
        }
        #tab1 ul{
            padding:0;
            margin:0;
        }
        #tab1 .tab-content li span{
            margin: 0 5px 0 0;
            font-family: "宋体";
            font-size: 12px;
            font-weight: 400;
            color: #ddd;
        }
        #tab1 .tab-content li {
            list-style: none;
            line-height:30px;
            height:30px;
            margin-top:6px;
            margin-left:10px;
            color:#aaa;
        }
        #tab1 .tab-content li a{
            color:black;
            text-decoration:none;
        }
        #tab1 .tab-content li a:hover{
            color:#3366CC;
            text-decoration:underline;
        }
        #tab1 .tab-nav ul li:hover,.cur-style {
            border-top:2px solid #FF6600;
            font-weight: 700;
            background: #fff;
            border-bottom: 1px solid #fff;
            color:#3366CC;
            text-decoration:underline;
            cursor:pointer
            border-bottom:none;
            border-right:1px solid #ccc;
            border-left:1px solid #ccc;
            margin-top:-1px;
            margin-left:-1px;
        }
        #tab1 .hide{
            display:none;
        }

        #tab1 .tab-nav ul li{
            list-style: none;
            float:left;
            text-align: center;
            width:110px
            height:31px;
            line-height:31px;
        }
    </style>
</head>
<body>
    <div id='tab1' class='tab-container'>
        <div class='tab-nav'>
            <ul>
                <li class='cur-style'>jQuery特效</li>
                <li>javascript特效</li>
                <li>div+css布局</li>
                <li>html5教程</li>
            </ul>
        </div>
        <ul class='tab-content'>
            <li><span>▪</span><a href="javacript:;">jQuery1</a></li>
            <li><span>▪</span><a href="javacript:;">jQuery2</a></li>
            <li><span>▪</span><a href="javacript:;">jQuery3</a></li>
            <li><span>▪</span><a href="javacript:;">jQuery4</a></li>
            <li><span>▪</span><a href="javacript:;">jQuery5</a></li>
            <li><span>▪</span><a href="javacript:;">jQuery6</a></li>
        </ul>
        
        <ul class='tab-content hide'>
            <li><span>▪</span><a href="javacript:;">javascript1</a></li>
            <li><span>▪</span><a href="javacript:;">javascript2</a></li>
            <li><span>▪</span><a href="javacript:;">javascript3</a></li>
            <li><span>▪</span><a href="javacript:;">javascript4</a></li>
            <li><span>▪</span><a href="javacript:;">javascript5</a></li>
            <li><span>▪</span><a href="javacript:;">javascript6</a></li>
        </ul>

        <ul class='tab-content hide'>
            <li><span>▪</span><a href="javacript:;">div+css1</a></li>
            <li><span>▪</span><a href="javacript:;">div+css2</a></li>
            <li><span>▪</span><a href="javacript:;">div+css3</a></li>
            <li><span>▪</span><a href="javacript:;">div+css4</a></li>
            <li><span>▪</span><a href="javacript:;">div+css5</a></li>
            <li><span>▪</span><a href="javacript:;">div+css6</a></li>
        </ul>

        <ul class='tab-content hide'>
            <li><span>▪</span><a href="javacript:;">html5-1</a></li>
            <li><span>▪</span><a href="javacript:;">html5-2</a></li>
            <li><span>▪</span><a href="javacript:;">html5-3</a></li>
            <li><span>▪</span><a href="javacript:;">html5-4</a></li>
            <li><span>▪</span><a href="javacript:;">html5-5</a></li>
            <li><span>▪</span><a href="javacript:;">html5-6</a></li>
        </ul>

    </div>
    <script>
        $(function () {
            (function (){
                var tab1 = $("#tab1 .tab-nav").find('li');
                var tabContent = $(".tab-content");
                tab1.each(function (i) {
                    $(this).bind('mouseover', function (){
                        // alert(i);
                        //当前Li获得样式.cur-style,其余的取消样式cur-style
                        var _this = $(this);
                        _this.addClass('cur-style').siblings().removeClass('cur-style');
                        //.tab-content对应的显示，其余隐藏
                        tabContent.eq(i).show().siblings().not('.tab-nav').hide();
                    });
                })
            })()
        })
    </script>
</body>
</html>

选项卡样式和功能，仅供参考！

 

posted @ 2014-08-31 15:29  Zell~Dincht  阅读(168)  评论(0)  编辑  收藏  举报