Giải trí tổng hợp và chia sẻ phần mềm máy tính

Giải trí tổng hợp và chia sẻ phần mềm máy tính

    Tab dạng thẻ với hiệu ứng trượt

    Share
    avatar
    Hoàng Hải
    Admin

    Tổng số bài gửi : 87
    Points : 267
    Reputation : 5
    Join date : 27/03/2013

    code Tab dạng thẻ với hiệu ứng trượt

    Bài gửi by Hoàng Hải on Wed Apr 17, 2013 4:48 pm

    Code:
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/></script> <script type='text/javascript'> //<![CDATA[ $(function(){ $("a.acctitle").each(function(){ $(this).click(function(){ $(".accContent").each(function(){ $(this).hide("slow"); }); $("#"+$(this).attr("ref")).show("slow"); return; }); }); }); //]]> </script> <style type='text/css'> .accordion{ width:400px; } .accContent{ display:none; border:1px solid #cccccc; padding:3px; } .acctitle{ display:block; width:100%; padding:3px 0px 3px 3px; background-color:#cccccc; color:#000000; cursor:pointer } .defaultAccordion{ display:block; } </style> <div class="accordion"> <a ref="first_section" class="acctitle"><b>Tab 1</b></a> <div id="first_section" class="accContent defaultAccordion"> <center><a href="http://www.code1k.com" target="_blank"><img src="http://4.bp.blogspot.com/-FM_0ax4RlwY/UAUDQ1A5upI/AAAAAAAAI2M/MHokyW4FsM0/s600/code1k_circle_2.jpg" alt="" style="width:380px;"/></a></center> </div> <a ref="second_section" class="acctitle"><b>Tab 2</b></a> <div id="second_section" class="accContent"> <center><a href="http://www.code1k.com" target="_blank"><img src="http://1.bp.blogspot.com/-j1ujTUanCRo/UAUDX8vrDDI/AAAAAAAAI20/zqxXMjcVCsY/s600/code1k_circle_7.jpg" alt="" style="width:380px;"/></a></center> </div> <a ref="third_section" class="acctitle"><b>Tab 3</b></a> <div id="third_section" class="accContent"> <center><a href="http://www.code1k.com" target="_blank"><img src="http://1.bp.blogspot.com/-Sq5DlDe6gzc/UAUDPbvmDGI/AAAAAAAAI2E/x4K4sNjUDVA/s600/code1k_circle_1.jpg" alt="" style="width:380px;"/></a></center> </div> <a ref="four_section" class="acctitle"><b>Tab 4</b></a> <div id="four_section" class="accContent"> <center><a href="http://www.code1k.com" target="_blank"><img src="http://4.bp.blogspot.com/-25733i_FsYw/UAUDa-0sxhI/AAAAAAAAI3E/FWAdNJvRzsY/s600/code1k_circle_9.jpg" alt="" style="width:380px;"/></a></center> </div> <a ref="five_section" class="acctitle"><b>Tab more</b></a> <div id="five_section" class="accContent"> <center><img src="http://2.bp.blogspot.com/-FLGeI8OXgZA/UA-uu5JdIhI/AAAAAAAAJF0/9SQG7qk6dx8/s1600/gem-options-code1k.com.png" alt=""/> Hoặc bạn có thể thêm nhiều thẻ tiện ích khác...</center> </div> </div> <!-- Code1k.com -->
    Demo:
    http://www.code1k.com/demo/2012/07/t...ung-truot.html


    __________________________________________________
    Hãy Like nếu thấy bài viết có ích nhé

      Hôm nay: Tue Oct 16, 2018 11:47 pm