知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    代碼簡潔的滑動門(選項卡tab)jquery插件可重復使用

    作者:佳明媽 來源:jquery 特效 2012-03-22 人氣:
    代碼簡潔的滑動門(tab)jquery插件調用方法:"#tabs",".tab_con" 這里的#tabs是jquery選項卡的鏈接按鈕的外層ID,只要注意這兩個地方調用就不會錯。一個頁面可以多次使用。

    代碼簡潔的滑動門(tab)jquery插件調用方法:"#tabs",".tab_con" 這里的#tabs是jquery選項卡的鏈接按鈕的外層ID,.tab_con是要顯示的的內容類名。只要注意這兩個地方調用就不會錯。一個頁面可以多次使用。

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>代碼簡潔的滑動門(tab)jquery插件 - 懶人建站</title>
    <meta name="keywords" content="jquery特效,JS代碼,js特效代碼大全,導航菜單代碼,焦點幻燈片,企業網頁設計欣賞" />
    <meta name="description" content="懶人建站為您提供-基于jquery特效,jquery彈出層效果,js特效代碼大全,JS廣告代碼,導航菜單代碼,下拉菜單代碼和jquery焦點圖片代碼。" />

    <style type="text/css">
    body,ul,li{margin: 0;padding: 0;font: 12px normal "宋體", Arial, Helvetica, sans-serif;list-style: none;}
    a{text-decoration: none;color: #000;font-size: 14px;}

    #tabbox{ width:600px; overflow:hidden; margin:0 auto;}
    .tab_conbox{border: 1px solid #999;border-top: none;}
    .tab_con{ display:none;}

    .tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
    .tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
    .tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
    .tabs li a:hover {background: #ccc;}    
    .tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}

    .tab_con {padding:12px;font-size: 14px; line-height:175%;}
    </style>
    <script src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        jQuery.jqtab = function(tabtit,tabcon) {
            $(tabcon).hide();
            $(tabtit+" li:first").addClass("thistab").show();
            $(tabcon+":first").show();
        
            $(tabtit+" li").click(function() {
                $(tabtit+" li").removeClass("thistab");
                $(this).addClass("thistab");
                $(tabcon).hide();
                var activeTab = $(this).find("a").attr("tab");
                $("#"+activeTab).fadeIn();
                return false;
            });
            
        };
        /*調用方法如下:*/
        $.jqtab("#tabs",".tab_con");
        
    });
    </script>
    </head>
    <body>
    <div id="tabbox">

        <ul class="tabs" id="tabs">
           <li><a href="http://www.ezdqdj.live/js/nav/" tab="tab1">導航菜單</a></li>
           <li><a href="http://www.ezdqdj.live/js/slide/" tab="tab2">焦點幻燈片</a></li>
           <li><a href="http://www.ezdqdj.live/js/gg/" tab="tab3">廣告代碼</a></li>
           <li><a href="http://www.ezdqdj.live/js/texiao/" tab="tab4">網頁特效</a></li>
        </ul>
        <ul class="tab_conbox">
            <li id="tab1" class="tab_con">
               <p><span><a href="http://www.ezdqdj.live/">懶人建站</a>只收錄實用和能提高用戶體驗的代碼</span><br />
    <span>我們只想解放出你的部分寫代碼時間來思考更高層次的設計,而不是要你懶惰、拼湊。</span></p>
            </li>
                
            <li id="tab2" class="tab_con">
                <p><span><a href="http://www.ezdqdj.live/">懶人建站</a>只收錄實用和能提高用戶體驗的代碼</span><br />
    <span>我們只想解放出你的部分寫代碼時間來思考更高層次的設計,而不是要你懶惰、拼湊。</span></p>
            </li>
        
            <li id="tab3" class="tab_con">
                <p><span><a href="http://www.ezdqdj.live/">懶人建站</a>只收錄實用和能提高用戶體驗的代碼</span><br />
    <span>我們只想解放出你的部分寫代碼時間來思考更高層次的設計,而不是要你懶惰、拼湊。</span></p>
            </li>
        
            <li id="tab4" class="tab_con">
                <p><span><a href="http://www.ezdqdj.live/">懶人建站</a>只收錄實用和能提高用戶體驗的代碼</span><br />
    <span>我們只想解放出你的部分寫代碼時間來思考更高層次的設計,而不是要你懶惰、拼湊。</span></p>
            </li>
        </ul>
        
    </div>
    <p>代碼簡潔的滑動門(tab)jquery插件調用方法:"#tabs",".tab_con" 這里的#tabs是jquery選項卡的鏈接按鈕的外層ID,.tab_con是要顯示的的內容類名。只要注意這兩個地方調用就不會錯。一個頁面可以多次使用。
    </p>

    <!--下面只是說明與程序代碼無關-->
    <div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
    <span>本代碼由<a href="http://www.ezdqdj.live" style="color:#F00;">懶人建站網 收集整理 我要學電腦.COM →51xuediannao.com</a> </span><br>
    <a href="http://www.ezdqdj.live/">懶人建站 http://www.ezdqdj.live/</a><br /><br/>

    <span> 、我們為您提供-
    <a href="http://www.ezdqdj.live/html+css/">html+css</a>,
    <a href="http://www.ezdqdj.live/js/">jquery特效</a>,
    <a href="http://www.ezdqdj.live/js/">JS代碼</a>,
    <a href="http://www.ezdqdj.live/js/texiao/">網頁特效</a>,
    <a href="http://www.ezdqdj.live/js/nav/">導航菜單</a>,
    <a href="http://www.ezdqdj.live/js/slide/">焦點幻燈片</a>,
    </span> <br />
    <span>懶人建站只收錄實用和能提高用戶體驗的代碼</span><br />
    <span>我們只想解放出你的部分寫代碼時間來思考更高層次的設計,而不是要你懶惰、拼湊。</span>
    </div>
    </body>
    </html>

    ↓ 查看全文

    代碼簡潔的滑動門(選項卡tab)jquery插件可重復使用由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    代碼簡潔的滑動門(選項卡tab)jquery插件可重復使用-最新評論

    • 2017新款高仿 2017-03-21 02:39:55
      a貨網 Stella Nina McCartney(斯特拉●麥卡特尼) Karma of charme(卡門) CéLINE(賽琳) ALEXANDER FACILA VENDI(亞力山大 · 法熙拉 · 蕓迪) TISSOT(天梭) Patek Philippe(百達翡麗) Vlm.yuandan.gq
    • 11 2017-03-21 02:03:55
      a貨網

      Stella Nina McCartney(斯特拉●麥卡特尼)
      Karma of charme(卡門)
      CéLINE(賽琳)
      ALEXANDER FACILA VENDI(亞力山大 · 法熙拉 · 蕓迪)
      TISSOT(天梭)
      Patek Philippe(百達翡麗)
      Vlm.yuandan.gq
    • 11 2016-10-28 09:10:25
      不錯
    • 11 2016-06-24 09:06:20
      不錯!
    • 11 2016-05-26 09:05:53
      今天過來看一看!
    • 11 2016-04-05 02:04:50
      下載出錯
    • 11 2015-10-26 01:10:10
      下載出錯了
    • 11 2015-10-09 12:10:33
      感激涕零,謝謝博主的好貼
    • 11 2015-10-09 12:10:26
      我繼續頂你!太好的文章了 支持
    • 11 2015-10-03 01:10:23
      很久沒有過來了,今天過來看一看!
    老子是皇帝在线客服