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
  • 相关阅读:
    洛谷P2221 [HAOI2012]高速公路(线段树+概率期望)
    洛谷P2254 [NOI2005]瑰丽华尔兹(单调队列)
    洛谷P2607 [ZJOI2008]骑士(基环树)
    洛谷P1505 [国家集训队]旅游(树剖+线段树)
    洛谷P3250 [HNOI2016]网络(整体二分+树状数组+树剖)
    洛谷P3833 [SHOI2012]魔法树(树链剖分)
    洛谷P4216 [SCOI2015]情报传递(树剖+主席树)
    Ansible 利用playbook批量部署Nginx
    Ansible实现zabbix服务器agent端批量部署
    时间序列模型:ARIMA
  • 原文地址:https://www.cnblogs.com/johnwonder/p/1676951.html
Copyright © 2011-2022 走看看