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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery实现本地存储
Dec 22 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php基本函数汇总
2015/07/09 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
轻化专业学生实习自我鉴定
2013/09/20 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
创业培训计划书
2014/05/03 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2015年城管执法工作总结
2015/07/23 职场文书