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手风琴的简单制作
May 12 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jquery自定义组件实例详解
Dec 31 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 魔术函数使用说明
2010/05/14 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
jsTree使用记录实例
2016/12/01 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
让div运动起来 js实现缓动效果
2017/07/06 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
给医务人员表扬信
2014/01/12 职场文书
社区母亲节活动记录
2014/03/06 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
外出考察学习心得体会
2016/01/18 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏