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


Posted in jQuery onAugust 02, 2017

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

1.EG2.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
 <link href="EG2.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
  $(function () {
   var category = $("div.Subname ul li:gt(3)"); // 获得索引值大于3的集合对象
   category.hide(); // 隐藏上面获取到的jQuery对象。

   var showbtn = $("div.Allname>a");
   showbtn.click(function () {
    if (category.is(":visible")) {
     category.hide();

     $(this).find('span').css("background", "url(img/down.gif) no-repeat 0 0").text("显示全部地方");
     $("ul li").removeClass("promoted"); // 去掉高亮样式
    } else {
     category.show();
     $(this).find("span").css("background", "url(img/up.gif) no-repeat 0 0").text("显示部分地方");
     $("ul li").filter(":contains('南京'),:contains('内蒙古'),:contains('三亚')").addClass("promoted"); //为特定内容添加高亮样式

    }
    return false;//超链接不跳转
   })
  })
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div class="Subname" >
 <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>
 <li><a href="#">重庆</a></li>
 <li><a href="#">香港</a></li>
 </ul> 


 <div class="Allname">
 <a href="#"><span>显示全部地方</span></a>
 </div>
 </div>
 </form>
</body>
</html>

2.样式表

*{margin:0;padding:0;}
body {font-size:12px;text-align:center;}
a{color:#04D; text-decoration:none;}
a:hover{ color:#F50; text-decoration:none;}
.Subname{width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.Subname ul{list-style:none;}
.Subname ul li{display:block; float:left; width:200px; line-height:20px;}
.Allname { clear:both; text-align:center;padding-top:10px;}
.Allname a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.Allname a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}

3.效果

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

图一

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

图二

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解jquery选择器的原理
Aug 01 #jQuery
jQuery上传插件webupload使用方法
Aug 01 #jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
简述jQuery Easyui一些用法
Aug 01 #jQuery
You might like
PHP面向对象概念
2011/11/06 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python 循环while和for in简单实例
2016/08/16 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
面试后感谢信
2014/02/01 职场文书
团队激励口号
2014/06/06 职场文书
节约粮食标语
2014/06/18 职场文书
八一建军节演讲稿
2014/09/10 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
计算机专业自荐信
2015/03/05 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python