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

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>

<head runat="server">

    <meta name="viewport" content="width=device-width" />

    <script src="../../Scripts/jquery-2.2.3.js"></script>

    <title>Index</title>

</head>

<body>

    <div class="SubCategoryBox">

        <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>

            <li><a href="#">明基</a></li>

            <li><a href="#">爱国者</a></li>

            <li><a href="#">其他品牌相机</a></li>

        </ul>

        <div class="showmore">

            <a href="#" id="C"><span>显示全部品牌</span></a>

        </div>

    </div>

    <script>

        var p = $("ul li:gt(7)");

        p.hide();

        $("#C").click(function(){

            var q;

            if(p.is(":visible")){

                p.hide();

                q=$(this).find('span').text("精简显示品牌");

            } else {

                p.show();

                q=$(this).find('span').text('显示全部品牌');

            }

        });

    </script>

</body>

</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. 适合wordpress中文网站的seo优化插件 DX-Seo

    DX-Seo是一款强大的多功能wordpress seo插件,主要功能及其使用方法如下 全局开关设置 启动插件后,进入"DX-Seo"栏目,你可以开启或者关闭其中的所有功能. 自动 ...

  2. __getattribute__()、__getattr__()、__setattr__()、__delattr__()

    访问顺序: 实例的__getattribute__().Descriptor的__get__().实例的__dict__.只读Descriptor的__get__().实例的__getattr__() ...

  3. How to get URL parameters with Javascript?

    function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '( ...

  4. MySQL 服务无法启动。 服务没有报告任何错误。 请键入 NET HELPMSG 3534 以获得更多的帮助。

    网上搜了下,看到有几种解决方法,本人综合了一下,作为记录 第一步 有一部分人成功了 在安装根目录创建data文件夹 第二步 有一部分人成功了 D:\Program Files\mysql\bin> ...

  5. 【译】Python Lex Yacc手册

    本文是PLY (Python Lex-Yacc)的中文翻译版.转载请注明出处.这里有更好的阅读体验. 如果你从事编译器或解析器的开发工作,你可能对lex和yacc不会陌生,PLY是David Beaz ...

  6. 查询反模式 - GroupBy、HAVING的理解

    为了最简单地说明问题,我特地设计了一张这样的表. 一.GROUP BY单值规则 规则1:单值规则,跟在SELECT后面的列表,对于每个分组来说,必须返回且仅仅返回一个值. 典型的表现就是跟在SELEC ...

  7. WPF打印票据

    最近工作的内容是有关于WPF的,整体开发没有什么难度,主要是在打印上因为没有任何经验,犯了一些难,不过还好,解决起来也不是很费劲. WPF打印票据或者是打印普通纸张区别不大,只是说打印票据要把需要打的 ...

  8. kail2在虚拟机上的安装

    首先先要安装虚拟机,打开安装包,下一步               选择典型 选择要安装到的目录,点下一步 4 输入密钥,下一步(密钥网上有很多我这边就例举一个,没用的话就自己找.我这个密钥是VM11 ...

  9. [PaPaPa][需求说明书][V0.3]

    PaPaPa软件需求说明书V0.3 前   言 不好意思,本文是没有前言的. 别说是前言了,其实关于界面的内容我也是不打算写!!   因为我知道你们想要的界面是这样的: 再不济也应该是这样的: 但是我 ...

  10. linux下备份mysql命令

    一,数据库的备份与导入 1),数据库的备份 1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名例:mysqldump -u dbadmin -p myblog ...