jquery实现网站列表切换效果的2种方法

本文实例为大家分享了jquery实现网站列表切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

效果图：

超文本标记语言头元字符集='utf-8' /标题网站品牌列表切换效果/title style * { margin : 0px；padding: 0px } a { color: black文本装饰：无；} a:hover { color: brown}。盒子{宽度： 600像素最小高度：200 pxborder: 1px固体# cccmargin: 0px自动；文本对齐：中心；边距-top : 40px；} .box ul { list-style :无；} .方框ul li { display:区块向左浮动：宽度： 200像素；/*线高： 30px*/} .show more { clear : both padding-top : 20px；} .showmore a{ border: 1px纯灰色；padd : 5px 10px }/样式脚本src='http:/scripts/jquery-1。3 .1 .js ' type=' text/JavaScript '/script script $(function(){ var $ category=$(' ul Li : gt(5): not(: last)'))；$类别。hide()；$('.showmore a ').单击(函数(){ if($ category。是(' :可见'){ $ category。hide()；$(这个)。查找(' span ').文本(')显示全部品牌');} else { $ category。show()；$(这个)。查找(' span ').文本(' )精简显示品牌');}返回false })；//用切换()方法更简洁实现上边切换功能//$('.showmore a ').switch(function(){//$ category。show()；//$(这个)。查找(' span ').文本(' )精简显示品牌');//}，function(){//$ category。hide()；//$(这个)。查找(' span ').文本(')显示全部品牌');//})}))/脚本/头体div class='box' ul lia href='# '索尼i(30123)/i/a/li lia佳能i(30123)/i/a/li lia康佳i(30123)/i/a/li lia小米i(30123)/i/a/li lia华为i(30123)/i/a/li lia联想I(30123)/I/a/Li lia href=' # ' vivoi(30123)/I/a/Li lia href=' # '中兴i(30123)/i/a/li lia苹果i(30123)/i/a/li lia三星i(30123)/i/a/li lia诺基亚i(30123)/i/a/li lia明基i(30123)/i/a/li lia爱国者i(30123)/i/a/li lia富士i(30123)/i/a/li lia松下i(30123)/i/a/li lia尼康i(30123)/i/a/li lia柯达i(30123)/i/a/li lia其他品牌I(30123)/I/a/Li/ul div='显示更多' a href='更多。html ' span显示全部品牌/span/a /div /div /body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。