jquery实现网页中常见的展示列表效果

来源：互联网发布：网络四大神书下载编辑：程序博客网时间：2024/05/20 19:31
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>jquery品牌列表效果</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style>*{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;}body {font: 16px/20px "Microsoft yahei,'微软雅黑'"color: #fff;}ul {list-style-type:none;}a {text-decoration: none;color: #000;}ul li {float: left;text-align: right;}.clear:before,.clear:after {content: "";clear: both;display: table;height: 0;overflow: hidden;zoom: 1;}.SubCategoryBox {width: 473px;margin: 0 auto;border: 1px solid;}.SubCategoryBox ul{padding: 5px 10px;}.SubCategoryBox ul li {padding: 5px;}.SubCategoryBox ul li:nth-child(3n-2) {width: 130px;}.SubCategoryBox ul li:nth-child(3n-1) {width: 161px;margin-right: 30px;}.SubCategoryBox ul li:nth-child(3n) {width: 130px;}.showmore {text-align: center;}.showmore a {background: #eef;color: #CFCFE0;}   .hightlight a,.hightlight i {color: red;/* font-weight: bold; */}</style></head><body><div class="SubCategoryBox"><ul class="clear" id="bancon"><li><a href="javascript:">佳能</a><i>(30441)</i></li><li><a href="javascript:">索尼</a><i>(30442)</i></li><li><a href="javascript:">三星</a><i>(30443)</i></li><li><a href="javascript:">尼康</a><i>(30444)</i></li><li><a href="javascript:">松下</a><i>(30445)</i></li><li><a href="javascript:">卡西欧</a><i>(30446)</i></li><li><a href="javascript:">富士</a><i>(30447)</i></li><li><a href="javascript:">柯达</a><i>(30448)</i></li><li><a href="javascript:">宾得</a><i>(30449)</i></li><li><a href="javascript:">理光</a><i>(30450)</i></li><li><a href="javascript:">奥斯巴林</a><i>(30451)</i></li><li><a href="javascript:">明基</a><i>(30452)</i></li><li><a href="javascript:">爱国者</a><i>(30453)</i></li><li><a href="javascript:">其他品牌相机</a><i>(30454)</i></li></ul><div class="showmore" id="showpp"><a href=""><span>显示全部品牌</span></a></div></div>     <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>     <script>     $(function(){     var $target=$("#bancon li:gt(5):not(:last)");     $target.hide();     var $toggleBtn=$("#showpp a");     $toggleBtn.click(function(){     if($target.is(":visible")){     $target.hide();     $(this).find("span").text("显示所有品牌");     $("ul li").removeClass('hightlight')     }     else {     $target.show();     $(this).find('span').text("精简显示品牌");     $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥斯巴林')").addClass('hightlight')     }     return false;   /*阻止a标签的跳转*/     });          });     </script></body></html>
1 0