网站品牌列表效果 jQuery效果

用户进入页面时,品牌列表是默认的精简显示的如下图:

单击商品列表下方的查看全部按钮来显示全部的品牌,同时推荐品牌的文字会高亮显示,按钮里面的文字也变成“收起查看”

jQuery 代码如何:

<script type="text/javaScript">
     $(document).ready(function(){
         var $cart=$("ul li:gt(5):not(:last)");   //获取索引值大于5的品牌集合对象(除最后一条)
         $cart.hide();    //隐藏上面获取的jQuery对象
         var $showBtn=$(".showBtn");   //获取"查看全部品牌"的按钮
         $showBtn.click(function(){       //给按钮添加onclick事件
             if($cart.is(":visible")){       //如果元素显示
             $cart.hide();         //隐藏$cart
             $showBtn.text("查看全部");      //改变文本  ps 背景图用css("background","url(路径) no-repeat 0 0");
            $("ul li").removeClass("active");      //去掉高亮显示
             }else{
                 $cart.show();       //显示$cart
                 $showBtn.text("收起查看");      //更改按钮文本
                 $("ul li").filter(":contains(‘索尼‘),:contains(‘三星‘)").addClass("active");    //筛选包含文本的内容添加高亮样式
             }
         });

});

</script>

注意: show() :显示隐藏的匹配元素

    hide():隐藏匹配的元素

css(“”,“”) : 给元素设置样式

   text("string")  :设置元素的文本内容

     filter(expr) : 筛选出与指定表达式匹配元素的集合,其中expr可以是多个选择器的组合

contains():包含文本元素

    addClass():为匹配元素添加指定的类名

removeClass() :为匹配元素去除指定的类名

   :visible   元素显示

时间: 2024-10-08 23:03:19

网站品牌列表效果 jQuery效果的相关文章

jQuery某网站品牌列表效果

jQuery某网站品牌列表效果,很经典的一个案例练习,主要是jQuery方法的练习熟悉! 效果图: HTML: <div class="subcategorybox"> <ul> <li><a href="#">佳能</a><i>(12367)</i></li> <li><a href="#">索尼</a><i

分享8款web网站开发中实用 jQuery 效果及源码

jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuery 插件可供使用.看看下面这些惊人的功能和效果,我相信你会发现一些很有用的东西. 1.纯css3实现的幽灵按钮导航 今天再给大家带来一款css3实现的幽灵按钮式的导航菜单.导航界面非常好看.右侧是一个css3实现的动画消息图标. 在线演示 源码下载 2.基于 jQuery 实现的 Ajax 异步分页

JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() 淡入淡出:JQuery fadeIn().JQuery fadeOut().JQuery fadeToggle().JQuery fadeTo() 滑动:JQuery slideDown().JQuery slideUP().JQuery slideToggle() 动画:JQuery animat

某网站品牌的列表效果(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>某网站品牌的列表效果</title> <script src="jquery-1.7.1.min.js" type

在网站开中很有用的8个 jQuery 效果【附源码】

jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuery 插件可供使用.看看下面这些惊人的功能和效果,我相信你会发现一些很有用的东西. 基于 jQuery 实现的 Ajax 异步分页 jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等 源码下载      在线演示 老牌的响应式 jQuery 幻灯片效果 Sl

怎么通过网站优化来增强SEO效果?

真正好的网站优化不应该针对哪一个搜索引擎,而应该关注用户的需求.搜索引擎把这这用户指标权重提升,实际上也是希望把更多的精力集中在用户体验的提升上面.那么,这些用户指标应该怎样提升呢?方法多种多样,下面分享一种最容易做到的优化思路. 这个思路是围绕网站形象展开的.一个好的网站形象往往可以让用户多停留一会,多点开几个页面.但是,这里要提的不单只是网站外观好看的问题,还需要做更多的形象改进,主要从以下几个方面入手. 1.第一屏要狠抓眼球 一般网站都不能一屏就展示完,而且一屏就展示完的网站给人过于单薄的

电商网站常用的楼层导航效果

很多电商网站都使用楼层导航效果来布局,如京东,唯品会等大型网站.那楼层导航效果怎么写了,其实很简单,主要用到鼠标滚动事件和高度的应用.现在我们就来用jquery来写以下.代码是直接copy过来的,因为注释比较多所以看起来有点乱.感兴趣的同学可以下载下面的源码来学习. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>楼层导航3</title> &

jQuery效果与扩展:左右滑动

众所周知,jQuery官方效果中有隐藏/显示,淡入淡出,以及上下滑动效果. 隐藏和显示HTML元素通过jQuery的hide()和show()方法来实现,比如这一段代码实现了简单的显示和隐藏效果 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script type="te

JQuery 选择器跟JQuery效果函数

JQuery 选择器 选择器                     实例                                   选取 *                             $("*")                                 所有元素 #id                          $("#lastname")                     id="lastname"