• Jquery 实现Tab效果(转载)


    <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
  • 相关阅读:
    linux网络配置
    第二章 以太网和数据封装
    linux用户权限
    第一章 网络互联
    linux学习之文件系统
    史上最全Java学习视频下载地址分享
    JAVA高级特性之集合
    Map集合不继承Collection接口,(HashMap类和TreeMap类)---输出结果,如果将Key值修改为首位不为0,HashMap输出就是随机顺序的,求指导,为什么为会这样???
    java中this关键字
    Java long数据类型---网上学习到的资料
  • 原文地址:https://www.cnblogs.com/johnwonder/p/1676951.html
Copyright © 2020-2023  润新知