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

2024-10-02 13:11:00

本文实例为大家分享了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结合PHP+MySQL实现二级联动下拉列表[实例]

实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给出省份:河南省(sf_id=1) 浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 复制代码代码如下: /* 地市表 */ create TABLE IF NOT EXISTS `dishi`( `ds_id` int(3)
jquery常用技巧及常用方法列表集合

1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.g
jquery 操作单选框，复选框，下拉列表实现代码

1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--
基于jquery的滚动新闻列表

呵呵,效果图如下: ps:gif做的不是很好,大家将就一下吧,呵呵. 下面来看代码: 复制代码代码如下: <div class="news-container" style="width: 260px; margin: auto;"> <ul> <li style="height:40px">  <a href="NewsRead.aspx
jQuery实现列表自动循环滚动鼠标悬停时停止滚动

需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图: 上干货 html: 复制代码代码如下: <div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a h
基于jquery实现多选下拉列表

本文实例为大家分享了jquery实现多选下拉列表展示的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul li{ list-style: none; } .hide{display: none} .widt
jquery+json 通用三级联动下拉列表

Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题第二个是采用Json数据格式构建,是我的第二次尝试改进
Jquery多选下拉列表插件jquery multiselect功能介绍及使用

有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦特性 •支持点击labe
jQuery初级教程之网站品牌列表效果

本文实例为大家分享了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&q
ajax初级教程之获取博文列表

在写这个Demo时,原本是想直接访问小菜博客的rss,但这是明显的跨域访问,是不允许的. 因此,小菜把博客rss保存到了本地,就是一个xml格式文件,直接用AJAX请求本地的xml文件. 通过本例,展示了如下技术: l AJAX的核心类XMLHttpRequest的使用. l AJAX通过GET方式获取服务端xml文件. l 利用Javascript操作xml文件. l 利用Javascript更新html界面. Demo概要说明: index.html作为主页,引用a
jQuery实现常见的隐藏与展示列表效果示例

本文实例讲述了jQuery实现常见的隐藏与展示列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net jquery品牌
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果

最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 4.列表数据加载(加载全部) 5.带动画效果的点赞功能 6.回复列表的hover显示功能 HTML代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta h
jQuery实现仿腾讯视频列表分页效果的方法

本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法.分享给大家供大家参考.具体如下: 这里使用jQuery仿腾讯视频列表分页效果,无刷新分页特效,点击分页按钮,无刷新进入下一页内容列表. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q
jQuery ui实现动感的圆角渐变网站导航菜单效果代码

本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码.分享给大家供大家参考.具体如下: 今天给大家分享一款基于jQuery UI的网站渐变导航菜单,可作为主导航,带渐入渐出效果,鼠标移过菜单后,菜单项上显示圆角背景,本地测试时,请注意引入的几个JS脚本文件,最好是保存到你本地,菜单兼容性也不错. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-codes
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!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&qu
jQuery实现的导航下拉菜单效果示例

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!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"> <h
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m
jquery实现的蓝色二级导航条效果代码

本文实例讲述了jquery实现的蓝色二级导航条效果代码.分享给大家供大家参考.具体如下: 这是一款网站导航条效果代码,菜单最多可支持两级,适合较多类型的网站使用,不喜欢蓝色的可自己修改成其它颜色,整体效果不错,挺简单的网站导航. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-2level-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

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

相关推荐

随机推荐