DEMO:Tab切换 

<html>

<head>
    <style type="text/css">

    .divtab .tabhead{font-size: 14px;color: #a7a7a7;}

    .divtab .tabhead .tabhead-list{position: relative;top: 3px;height: 27px;margin: 0;padding: 0;border-bottom: 2px solid #f0f0f0;}

    .divtab .tabhead .tabhead-list li{line-height: 21px;display: inline-block;float: left;width: 90px;text-align: center;*zoom: 1;*display: inline;}

    .divtab .tabhead .tabhead-list li.on{color: #e55555;}

    .divtab .tabhead .tabhead-list li:hover{cursor: pointer;}

    .divtab .tabhead .tabhead-list p{position: absolute;top: 27px;width: 90px;height: 2px;margin: 0;background: #e55555;}

    .divtab .tabbody{padding-top: 12px;}

    .divtab .tabbody .tabone{position: relative;display: none;overflow: auto;}

    .divtab .tabbody .tabone.show{display: block;}

    </style>
</head>

<body>
    <div class="divtab">
        <div class="tabhead">
            <ul class="tabhead-list">
                <li id="atab" class="on">A</li>
                <li id="btab">B</li>
                <li id="ctab">C</li>
                <li id="dtab">D</li>
                <li id="etab">E</li>
                <li id="ftab">F</li>
                <p></p>
            </ul>
        </div>
        <div class="tabbody">
            <div class="tabone show" id="Acon">AAAAA</div>
            <div class="tabone" id="Bcon">BBBBB</div>
            <div class="tabone" id="Ccon">CCCCC</div>
            <div class="tabone" id="Dcon">DDDDD</div>
            <div class="tabone" id="Econ">EEEEE</div>
            <div class="tabone" id="Fcon">FFFFF</div>
        </div>
    </div>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script language="javascript">
    $(function() {
        $('.tabhead-list li').mouseover(function() {
            $(this).css("cursor", "pointer");
        });
        $('.tabhead-list li').click(function() {
            var liindex = $('.tabhead-list li').index(this);
            $(this).addClass('on').siblings().removeClass('on'); //.siblings() 获得匹配集合中每个元素的同胞
            $('.tabbody div.tabone').eq(liindex).fadeIn(150).siblings('div.tabone').hide();
            var liWidth = $('.tabhead-list li').width();
            $('.divtab .tabhead-list p').stop(false, true).animate({
                'left': liindex * liWidth + 'px'
            }, 300);
        });
    });
    </script>
</body>

</html>

 

posted @ 2017-02-27 15:28  天蝎座  阅读(156)  评论(0)    收藏  举报