zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    pip不是内部或外部命令也不是可运行的程序或批处理文件的问题
    动态规划 leetcode 343,279,91 & 639. Decode Ways,62,63,198
    动态规划 70.climbing Stairs ,120,64
    (双指针+链表) leetcode 19. Remove Nth Node from End of List,61. Rotate List,143. Reorder List,234. Palindrome Linked List
    建立链表的虚拟头结点 203 Remove Linked List Element,82,147,148,237
    链表 206 Reverse Linked List, 92,86, 328, 2, 445
    (数组,哈希表) 219.Contains Duplicate(2),217 Contain Duplicate, 220(3)
    重装系统
    java常用IO
    端口
  • 原文地址:https://www.cnblogs.com/johnwonder/p/1676951.html
Copyright © 2011-2022 走看看