要求：用户进入该页面时，品牌列表默认是精简显示，用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html>
  6. <head runat="server">
  7.     <meta name="viewport" content="width=device-width" />
  8.     <script src="../../Scripts/jquery-2.2.3.js"></script>
  9.     <title>Index</title>
  10. </head>
  11. <body>
  12.     <div class="SubCategoryBox">
  13.         <ul>
  14.             <li><a href="#">佳能</a></li>
  15.             <li><a href="#">索尼</a></li>
  16.             <li><a href="#">三星</a></li>
  17.             <li><a href="#">尼康</a></li>
  18.             <li><a href="#">松下</a></li>
  19.             <li><a href="#">卡西欧</a></li>
  20.             <li><a href="#">富士</a></li>
  21.             <li><a href="#">柯达</a></li>
  22.             <li><a href="#">宾得</a></li>
  23.             <li><a href="#">理光</a></li>
  24.             <li><a href="#">奥林巴斯</a></li>
  25.             <li><a href="#">明基</a></li>
  26.             <li><a href="#">爱国者</a></li>
  27.             <li><a href="#">其他品牌相机</a></li>
  28.         </ul>
  29.         <div class="showmore">
  30.             <a href="#" id="C"><span>显示全部品牌</span></a>
  31.         </div>
  32.     </div>
  33.     <script>
  34.         var p = $("ul li:gt(7)");
  35.         p.hide();
  36.         $("#C").click(function(){
  37.             var q;
  38.             if(p.is(":visible")){
  39.                 p.hide();
  40.                 q=$(this).find('span').text("精简显示品牌");
  41.             } else {
  42.                 p.show();
  43.  
  44.                 q=$(this).find('span').text('显示全部品牌');
  45.             }
  46.         });
  47.     </script>
  48. </body>
  49. </html>

显示效果：

jQuery实现隐藏标签的更多相关文章

  1. jQuery触发a标签点击事件-为什么不跳转

    今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...

  2. jQuery获取隐藏文本域

    [html] view plaincopyprint?//jquery获取隐藏域  <style type="text/css">  div{      width:1 ...

  3. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  4. jquery修改a标签的href链接和文字

    可以先体验一下效果:http://keleyi.com/keleyi/phtml/jquery/2.htm 以下修改a标签的href链接和修改文字的代码: <script type=" ...

  5. jquery禁用a标签,jquery禁用按钮click点击

    jquery禁用a标签方法1 $(document).ready(function () { $("a").each(function () { var textValue = $ ...

  6. jQuery控制a标签不可点击 不跳转

    jquery禁用a标签方法1 01 02 03 04 05 06 07 08 09 10 11 12 $(document).ready(function () {         $("a ...

  7. jquery禁用a标签

    jquery禁用a标签方法1 01 02 03 04 05 06 07 08 09 10 11 12 $(document).ready(function () {         $("a ...

  8. jQuery过滤HTML标签并高亮显示关键字的方法

    本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要 ...

  9. IOS通讯录的隐藏标签【电话】的特殊功能（在IOS11已失效）

    这功能比较适合有强迫症,爱折腾的人哈!! 规范了通讯录标签,以后可以轻松的知道别人是用短号还是亲情网给你打电话. 如果是长号还可以显示归属地. 也许从IOS8(不太清楚)开始自带了号码归属地显示功能, ...

随机推荐

  1. asp.net发布到IIS中出现错误：处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”

    asp.net发布到IIS中出现错误:处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler” http:// ...

  2. EF OnModelCreating

      http://www.cnblogs.com/libingql/p/3353112.html     protected override void OnModelCreating(DbModel ...

  3. 【转帖】Moodle平台的5个新玩法

    [玩坏Moodle平台]Moodle平台的5个新玩法 1.RSS订阅 Moodle平台可以导入外部博客(或其他提供RSS的服务),并显示在Moodle内置的博客系统中.无论是自己的个人网站还是他人的博 ...

  4. whoami 和 Who am i

    ① 两个命令在一般的情况下,似乎效果是一样的 ② 但是当你执行完su 命令切换用户后,就不一样了,who am i 显示最早login的账户,而whoami 显示切换后的账户 例如: -bash-3. ...

  5. 查看SqlAzure和SQLServer中的每个表数据行数

    SqlAzure中的方式: select t.name ,s.row_count from sys.tables t join sys.dm_db_partition_stats s ON t.obj ...

  6. dede教程之后台登录是自动跳出解决方法

    有时也不知道什么原因,登录后台时输入全部正确点确认按钮时却会自动跳出.必须输入http://你的域名/dede/login.php才可以登录.通过尝试最终解决了问题,下面分享出来: 1.打开根目录da ...

  7. Arduino 学习

    Arduino 背景可以参考官方网站www.arduino.cc 先看一个最简单的示例程序: 打开 Arduino IDE , 选择菜单:文件 -> 示例 -> 01.Basics -&g ...

  8. LoadRunner性能测试结果分析

    LoadRunner性能测试结果分析http://www.docin.com/p-793607435.html

  9. SRM 591 div1 275

     topcoder被Appirio收购了 好久没做tc,这个题目挺简单.就是Arena里面看不到图片,只能去tc网站上找题目.http://community.topcoder.com/stat?c= ...

  10. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...