某网站品牌列表效果

最新推荐文章于 2017-11-06 08:45:00 发布
最新推荐文章于 2017-11-06 08:45:00 发布
阅读量590 收藏
点赞数
分类专栏： jquery 文章标签： class function xhtml float html filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helen_shw/article/details/5138226
版权
  1. show() 显示隐藏的匹配元素
  2. css(name,value)给元素设定样式
  3. text(string)设置所有匹配元素的内容
  4. filter(expr)筛选出与指定表达式匹配的元素集合，其中expr可以使多个选择器的组合
  5. addClass(class)为匹配的元素添加指定的类名
  6. removeClass(class)从匹配的元素中删除指定样式

 

<!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>
    <title>无标题页</title>
    <style type="text/css">
       .SubCategoryBox{width: 600px;}
       .SubCategoryBox ul { width: 600px;}
       .SubCategoryBox ul li { list-style: none; width: 200px; float: left;}
      
       .showmore { width: 600px; }
       .showmore a{ float: right; padding-right: 10px;}
      
       .promoted { font-size: 14px; font-weight: lighter; color: #99000; }
    </style>
    <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
    <script type="text/javascript">
        $(function(){
        var $category=$('ul li:gt(7):not(:last)');
        $category.hide();
       
        var $toggleBtn = $('div.showmore > a');
        $toggleBtn.click(function(){
          if($category.is(":visible"))
          {
                $category.hide();
                $('.showmore a span')
                      .text("显示全部品牌");
                $('ul li').removeClass("promoted");
          }
          else
          {
                  $category.show();
                  $('.showmore a span')
                            .text("精简显示品牌");
                 
                  $('ul li').filter(":contains('佳能')")
                            .addClass("promoted");  
          }               
          return false;         
        })
       
       
        })
    </script>
</head>
<body>
<div class="SubCategoryBox">
    <ul>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
       <li><a href="#">佳能</a><i>(3044)</i></li>
    </ul>
    <div class="showmore">
     <a href="#"><span>显示全部</span></a>
    </div>
</div>
</body>
</html>

 

haiwei_sun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网站品牌列表效果
key_zhaojd
08-04 623
*{ margin:0; padding:0;} body {font-size:12px;text-align:center;} a { color:#04D; text-decoration:none;} a:hover { color:#F50; text-decoration:underline;} .SubCategoryBox {width:600px; margin:0 auto;
案例----某网站品牌列表的效果
fisea的专栏
05-06 541
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> *{ margin:0; padding:0;}body {font-size:12px;text-align:center;}a { color:#04D; text-decoration:none;}a:hover {
Jquery案例——某网站品牌列表的效果
weixin_34292959的博客
01-09 294
一下是效果图。点击“显示全部品牌”，高亮推荐品牌，并显示全部品牌。 HTML文件： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <link href="css/2.6.css" r...
例.网站品牌列表的效果
angsequ1746的博客
05-03 177
* { margin: 0; padding: 0; } body { font-size: 12px; text-align: center; } ...
jQuery初级教程之网站品牌列表效果
10-19
本文将详细介绍使用jQuery实现网站品牌列表效果的初级教程，通过一个具体的实例来展示如何通过jQuery控制品牌列表的显示与隐藏，以及如何对特定内容进行高亮显示。 首先，我们应当了解jQuery库的基础。jQuery是一个...
jQuery实现常见的隐藏与展示列表效果示例
10-18
综上所述，jQuery在实现隐藏与展示列表效果方面提供了非常丰富的接口和方法，这使得原本复杂的DOM操作和事件处理变得简单高效。通过本文的实例，我们可以深入理解jQuery在实际Web开发中的应用，包括如何通过简单的...
JS+DIV+CSS实现仿表单下拉列表效果
11-28
本文介绍了一种使用JavaScript (JS)、Div和CSS来实现仿表单下拉列表效果的方法，这种方法能够提供更大的样式控制和交互性，以替代传统的`<select>`元素。 首先，我们要理解这个实现的基本结构。它由一个`<input>`...
AndroidAnimationFrame:实现列表icon动画切换效果
05-02
实现列表icon动画切换效果在项目需求中，为实现类似于某猫首页的发现品牌专项中部分商品icon有上下切换的效果，而做出的总结：分析1、在icon图片上下切换效果时，想到属性动画Translation(移动)效果2、上下切换只有...
某集团网站建设推广方案.zip
12-05
某集团的网站建设推广方案旨在构建一个高效、互动且具有吸引力的在线存在，以提升品牌知名度，增加用户粘性，并最终实现商业目标。以下是这个方案所涵盖的关键知识点： 1. **网站规划与设计**： - 用户体验（UX）...
网站品牌列表效果.zip
04-25
精简品牌列表中收起和下拉放在同一个按钮，且三个品牌名变为橙色。
jQ品牌logo列表选项卡切换特效代码
03-20
jQ品牌logo列表选项卡切换是一款软件公司网站选项卡切换品牌logo列表代码。
jQ品牌logo列表选项卡切换.zip
07-11
jQ品牌logo列表选项卡切换是一款软件公司网站选项卡切换品牌logo列表代码。
品牌展示，点击打开点击收缩显示
07-08
品牌展示，点击打开点击收缩显示！
jq代码学习3--某网站品牌列表的效果 fl ch2 p53
vvvbird的专栏
09-25 311
<!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> <meta http-equiv="Content-Ty
jQuery某网站品牌列表效果
weixin_30633405的博客
11-06 82
jQuery某网站品牌列表效果,很经典的一个案例练习，主要是jQuery方法的练习熟悉！ 效果图： HTML: <div class="subcategorybox"> <ul> <li><a href="#">佳能</a><i>(12367)</i&g...
网站品牌列表效果 jQuery效果
weixin_30338497的博客
05-18 282
用户进入页面时，品牌列表是默认的精简显示的如下图： 单击商品列表下方的查看全部按钮来显示全部的品牌，同时推荐品牌的文字会高亮显示，按钮里面的文字也变成“收起查看” jQuery 代码如何： <script type="text/javaScript"> $(document).ready(function(){ var $car...
jQuery只网站品牌列表的效果
夏小沫学习之路
07-30 711
图1： 当点击显示全部品牌时会显示全部品牌列表图2： 点击精简显示时 回到图1 思路如下 1.隐藏部分品牌 2.当点击显示全部品牌时，将隐藏的品牌显示显示出来 3.点击全部品牌时，将按钮text换成精简显示品牌 3.点击精简显示品牌时，隐藏部分品牌，将按钮的text换成全部显示品牌 源代码如下： html> html> head
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值