Tabs 滑动显示

 

html 
<!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>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
    <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="js/js/tabs.js" type="text/javascript"></script>
    <link type="text/css" href="css/tabs.css" rel="Stylesheet" />
</head>
<body>
    <div class="tab">
        <p>
            <span id="tab1">相关文章</span> 
            <span id="tab2">本月热门</span> 
            <span id="tab3">点击排行</span>
        </p>
        <ul class="tab1">
            <li><a href="http://www.163.com">相关文章</a></li>
            <li>相关文章</li>
            <li>相关文章</li>
        </ul>
        <ul class="tab2">
            <li>本月热门</li>
            <li>本月热门</li>
        </ul>
        <ul class="tab3">
            <li>点击排行</li>
            <li>点击排行</li>
            <li>点击排行</li>
            <li>点击排行</li>
            <li>点击排行</li>
        </ul>
    </div>
</body>
</html>

 

tabs.js 
$(function() {
            $(".tab span:first").addClass("current");
            $(".tab ul:not(:first)").hide();
            $(".tab span").mousemove(function() {
                $(".tab span").removeClass("current");
                $(this).addClass("current");
                $(".tab ul").hide();
                $("." + $(this).attr("id")).show();
            })
        })

 

tabs.css 
.tab{ background-color:#fafafa; margin:5px 8px; padding:5px 10px;}
        .tab p{ border-bottom:1px solid #cccccc; font-weight:bold ; padding:0px 10px 2px;}
        .tab p span{ background-color:#efefef; border:1px solid #cccccc; cursor:pointer; margin-right:6px; padding:2px 5px;}
        .tab li{ border:1px double #cccccc; padding-bottom:3px; margin:5px 0}
        .tab .tab2,.tab .tab3{ display:none;}
        .tab p span.current{ background-color:#fafafa; border-bottom-color:#fafafa;}
posted @ 2010-03-19 09:52  湖  阅读(423)  评论(0)  编辑  收藏  举报