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

<%@ 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. [CoreOS 转载] CoreOS实践指南（六）：分布式数据存储Etcd（下）

    转载:http://www.csdn.net/article/2015-01-28/2823739/2 摘要:Etcd是CoreOS生态系统中处于连接各个节点通信和支撑集群服务协同运作的核心地位的模块 ...

  2. Thinkpad X240使用U盘安装Win7系统

    更改BIOS设置 不同电脑的进入BIOS的方式可能不太一样,Thinkpad X240的进入方式是在电脑启动的时候按下回车键,然后按F1进入BIOS. 1. 修改secure boot为Disable ...

  3. Codeforces 346C Number Transformation II 构造

    题目链接:点击打开链接 = = 990+ms卡过 #include<stdio.h> #include<iostream> #include<string.h> # ...

  4. Android 中ViewPagerIndicator的使用

    1.https://github.com/JakeWharton/Android-ViewPagerIndicator 2.http://blog.csdn.net/xiaanming/article ...

  5. android自定义RadioGroup实现可以添加多种布局

    android自带的RadioGroup是继承自LinearLayout,如果布局的时候不是直接写radiobutton,即radiobutton外面还包了一层容器,这时分组是不成功的,因为查找不到r ...

  6. angularjs + seajs构建Web Form前端(三) -- 兼容easyui

    回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...

  7. 【Thinking in Java-CHAPTER 1&&2】对象导论&&一切都是对象

    JAVA起源 从JDK诞生到现在已经有11年的时间了.沧海桑田一瞬间.转眼11年过去了,JDK已经发布了6个版本.在这11年里诞生了无数和Java相关的技术和标准.现在让我们进入时间隧道,重新回到19 ...

  8. iOS时间那点事儿–NSTimeZone

    NSTimeZone **时区是一个地理名字,是为了克服各个地区或国家之间在使用时间上的混乱. 基本概念: GMT 0:00 格林威治标准时间; UTC +00:00 校准的全球时间; CCD +08 ...

  9. 注意啦！10 个你需要了解的 Linux 网络和监控命令

    下面列出来的10个基础的每个Linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些:hostname, ping, ifconfig, iwconfig, netstat, nslooku ...

  10. EventKit 学习（译）

    From:http://docs.xamarin.com/guides/ios/platform_features/introduction_to_eventkit/ 本教程展示了对于如何通过Even ...