代码改变世界

Jquery 实现Tab效果(转载)

2010-03-03 10:03  爱研究源码的javaer  阅读(429)  评论(0)  编辑  收藏  举报
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="Public/jquery.js" type="text/javascript"></script>

    <style type="text/css">
        .tab
        {
            background-color: #FAFAFA;
            margin: 5px 8px;
            padding: 5px 10px;
        }
        .tab p span
        {
            background-color: #EFEFEF;
            border: 1px solid #CCCCCC;
            cursor: pointer;
            margin-right: 6px;
            padding: 2px 5px;
        }
        .tab p span.current
        {
            background-color: #FAFAFA;
            border-bottom-color: #fafafa;
        }
        .tab p
        {
            border-bottom: 1px solid #CCCCCC;
            font-weight: bold;
            padding: 0 10px 2px;
        }
        .tab li
        {
            border-bottom: 1px dotted #CCCCCC;
            padding-bottom: 3px;
            margin: 5px 0;
        }
        .tab .mhot, .tab.allhot
        {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式
            $(".tab ul:not(:first)").hide(); //隐藏其它的UL
            $(".tab span").mouseover(function() {
                $(".tab span").removeClass("current"); //去掉所有SPAN的样式
                $(this).addClass("current");
                $(".tab ul").hide();
                $("." + $(this).attr("id")).fadeIn('slow');
            });
        });
    </script>
</head>
<body>
    <div class="tab">
        <p>
            <span id="tab1">tab1</span> <span id="tab2">tab2</span> <span id="tab3">tab3</span></p>
        <ul class="tab1">
            <li>我和我的祖国</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>
转自:http://www.cnblogs.com/jeep/archive/2010/03/02/1676819.html