jQuery初级教程之网站品牌列表效果

本文实例为大家分享了jQuery网站品牌列表效果展示的具体代码，供大家参考，具体内容如下

1.EG2.aspx

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title script src=' http : jquery-1。9 .1 .量滴js ' type=' text/JavaScript '/' subname ul Li : gt(3)')；//获得索引值大于3的集合对象类别。hide()；//隐藏上面获取到的jQuery对象var showbtn=$('div .all namea’)；给BTN看看。点击(函数(){ if(类别。是(' :可见'){ category。hide()；$(这个)。查找(' span ').css(“”背景“，URL(img/down . gif)no-repeat 0 0’).文本('显示全部地方');$('ul li ').removeClass(“”提升');//去掉高亮样式} else {类别。show()；$(这个)。查找(' span ').css(“”背景“，URL(img/up . gif)no-repeat 0 0’).文本('显示部分地方');$('ul li ').筛选器(“:contains(”南京)，contains('内蒙古)，contains('三亚')').addClass(')提升');//为特定内容添加高亮样式}返回false//超链接不跳转})})))/脚本/头体表单id=' form 1 ' runat=' server ' div class=' Subname ' ul lia href=' # '南京/a/li lia href='# '北京/a/li lia href='# '内蒙古/a/li lia href='# '杭州/a/li lia href='# '三亚/a/li lia href='# '青岛/a/li lia href='# '海南/a/li lia href='# '云南/a/li lia href='# '厦门/a/li lia href='# '重庆/a/li lia href='# '香港/a/Li/ul div class=' Allname ' a href=' # ' span显示全部地方/span/a/div/div/form/body/html 2 .样式表

* {边际：0划水：0;}正文{ font-size :12 px文本对齐：居中；} a { color: # 04D文本装饰：无；} a:hover { color: # F50文本装饰：无；}.subname { width :600 pxmargin :0 auto文本对齐：居中；页边距-顶部：40像素；}.subname ul { list-style : none；}.subname ul Li { display : block float : left宽度宽度：200像素线高：20 px}.Allname { clear:both文本对齐：居中；填充-top :10 px；}.Allname a { display:block宽度宽度：120pxmargin:0自动线高：24 pxborder:1px实心# AAA}。所有名称均为span { padding-left :15 px；后台： URL(img/down。gif)不重复0 0；}.推广了一款{ color: # F50}3。效果

图一

图二

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。