javascript

位置:IT落伍者 >> javascript >> 浏览文章

jquery选项卡的做法


发布日期:2019年05月24日
 
jquery选项卡的做法

<!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>

上一篇:JavaScript 模拟类机制及私有变量的方法及思路

下一篇:js中取绝对值的2种方法