jQuery实现隐藏标签
要求:用户进入该页面时,品牌列表默认是精简显示,用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。
<%@ 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实现隐藏标签的更多相关文章
- jQuery触发a标签点击事件-为什么不跳转
今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...
- jQuery获取隐藏文本域
[html] view plaincopyprint?//jquery获取隐藏域 <style type="text/css"> div{ width:1 ...
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- jquery修改a标签的href链接和文字
可以先体验一下效果:http://keleyi.com/keleyi/phtml/jquery/2.htm 以下修改a标签的href链接和修改文字的代码: <script type=" ...
- jquery禁用a标签,jquery禁用按钮click点击
jquery禁用a标签方法1 $(document).ready(function () { $("a").each(function () { var textValue = $ ...
- jQuery控制a标签不可点击 不跳转
jquery禁用a标签方法1 01 02 03 04 05 06 07 08 09 10 11 12 $(document).ready(function () { $("a ...
- jquery禁用a标签
jquery禁用a标签方法1 01 02 03 04 05 06 07 08 09 10 11 12 $(document).ready(function () { $("a ...
- jQuery过滤HTML标签并高亮显示关键字的方法
本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要 ...
- IOS通讯录的隐藏标签【电话】的特殊功能(在IOS11已失效)
这功能比较适合有强迫症,爱折腾的人哈!! 规范了通讯录标签,以后可以轻松的知道别人是用短号还是亲情网给你打电话. 如果是长号还可以显示归属地. 也许从IOS8(不太清楚)开始自带了号码归属地显示功能, ...
随机推荐
- Updating Protobuf and GRPC in Golang
转自: http://russmatney.com/techsposure/update-protobuf-golang-grpc/ TL;DR: When protobuf updates, all ...
- 【转】ASP.NET WEB API系列教程
from: 西瓜小强 http://www.cnblogs.com/risk/category/406988.html ASP.NET Web API教程(六) 安全与身份认证 摘要: 在实际的项目应 ...
- mvc 方法只允许ajax访问
有时候我们写一些方法 只想在ajax使用 其他的不想暴露 就可以对方法进行限制 如下: [AttributeUsage(AttributeTargets.Method)] public class ...
- [Javascript] Functor Basic Intro
Well, this stuff will be a little bit strange if you deal with it first time. Container Object: Just ...
- HBase - Phoenix剖析
1.概述 在<Hadoop-Drill深度剖析>一文当中,给大家介绍了Drill的相关内容,就实时查询来说,Drill基本能够满足要求,同时还可以做一个简单业务上的聚合,如果在使用Hive ...
- android 九宫加密记事本
自己写的超级安全记事本,用PBEWithMD5AndDES加密sqlite内容几乎无法破解, 九宫点密码登录, 支持备份到SDcard,email,network drivers etc. 附件Apk ...
- jeos没有消亡,但看 debian 的 netinst .iso格式,那就是jeos的系统!
曾经ubuntu推出专供轻量硬件(如虚拟机)方式的just os格式的.iso [小巧.轻量.快速.干净] 但在 ubuntu 8.04后 再也没有继续 ...... 可惜 不曾想,ubuntu的老爸 ...
- UFT\QTP 12 新特性
UFT\QTP 12 新特性 http://blog.csdn.net/testing_is_believing/article/details/22310297
- [LeetCode] Range Sum Query 2D - Immutable
Very similar to Range Sum Query - Immutable, but we now need to compute a 2d accunulated-sum. In fac ...
- sublime返回上一编辑位置
用了sublime好长时间了,最近发现一个python插件可以在编辑的时候返回上一编辑位置,这个功能在eclipse很常用,现在终于能在sublime上使用了.好爽. 贴个地址:https://for ...