熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery選項卡的做法

2013-11-15 11:56:10  來源: JSP教程 

  <!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "

  <html xmlns=" <head> <meta httpequiv="ContentType" content="text/html; charset=utf" /> <title>品牌的精選和顯示全部</title> <style> *{ margin:; padding:;} body{ fontsize:px; textalign:center} showLess{ margin:auto; paddingtop:px; width:px;} showLess ul li{ display:block; float:left; width:px; lineheight:px;} showMore{ clear:both; paddingtop:px;} a{ textdecoration:none;} a:hover{ cursor:pointer; color:#F; textdecoration:underline;} </style> <script language="javascript" type="text/javascript" src="/script/jqueryminjs"></script> <script> $(function(){ $("showLess ul li:gt():not(:last)")hide(); $("showMore a span")toggle(function(){ $("showLess ul li:gt():not(:last)")slideDown("slow"); $("showMore a span:last")text("精簡品牌"); $("#b")replaceWith("<b id=b></b>"); return false; }function(){ $("showLess ul li:gt():not(:last)")slideUp(""); $("showMore a span:last")text("顯示全部品牌"); $("#b")replaceWith("<b id=b>+</b>"); return false; }) $("showLess ul li:last")click(function(){ $("showLess ul li:gt():not(:last)")slideToggle(); return false; }); }) </script> </head> <body> <div class="showLess"> <ul> <li><a href="#">美利達</a></li> <li><a href="#">捷安特</a></li> <li><a href="#">飛鴿</a></li> <li><a href="#">寶島</a></li> <li><a href="#">新日</a></li> <li><a href="#">巴赫</a></li> <li><a href="#">永久</a></li> <li><a href="#">二八</a></li> <li><a href="#">更多品牌</a></li> </ul> </div> <div class="showMore"> <a href="#"><b id=b></b><span>顯示全部品牌</span></a> </div> </body> </html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19922.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.