第一步编写页面内容
<!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-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{ 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; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
第二步编写jquery代码
<!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-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{ 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; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide(); // 隐藏$category
$('.showmore a span')
.css("background","url(img/down.gif) no-repeat 0 0")
.text("显示全部品牌"); //改变背景图片和文本
$('ul li').removeClass("promoted"); // 去掉高亮样式
}else{
$category.show(); // 显示$category
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
}
return false; //超链接不跳转
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
效果 图片1
图片2
- 大小: 4.5 KB
- 大小: 7.8 KB
分享到：
相关推荐
本篇文章将详细讲解如何利用jQuery实现窗口显示与隐藏的效果，这是网页动态效果设计中常见的需求。 首先，我们需要理解jQuery的核心概念。jQuery库通过一个选择器（Selector）来定位页面中的DOM元素，然后对这些...
3. **隐藏与显示Fragment**：如果Fragment已经添加到Activity，但需要暂时隐藏或显示，可以使用`hide()`和`show()`方法。 ```java transaction.hide(currentFragment); transaction.show(nextFragment); ``` ...
在Scratch中，显示与隐藏是基本的动画控制功能，对于创建动态和交互性的故事、游戏或演示至关重要。本讲义将详细介绍如何在Scratch中实现角色的显示与隐藏，并通过实际操作来提升编程技巧。 【显示与隐藏的角色状态...
这个名为“principle中联动效果的显示与隐藏”的压缩包文件很可能包含了一个或多个小的示例项目，展示了如何在Principle中实现元素的显示和隐藏，并且这些效果可能是通过用户操作或其他元素的状态改变而触发的联动...
本文将详细介绍如何在Windows XP操作系统中显示隐藏文件，这是一个基本的电脑基础知识。 首先，让我们了解隐藏文件的概念。系统为了保护重要的系统文件不被意外删除或修改，通常会将它们设置为隐藏状态。此外，一些...
标题“JS隐藏同级的元素后只显示JS文件”指的是使用JavaScript编程语言来实现一个功能，即在HTML文档中，当用户操作时（比如点击某个按钮），隐藏同一层级的所有元素，然后只显示与该操作相关的JavaScript文件内容。...
在"excel操作练习4.xls"中，你可能需要按照字母顺序排序一列数据，或者利用过滤功能隐藏不关心的信息，只显示符合特定条件的行。 "excel操作练习5.xls"可能会引入数据验证，这允许你设置输入规则，防止错误的数据...
在课程资源的“3、定时显示隐藏元素”部分，你可能会找到更详细的代码示例、交互练习和讲解视频，帮助你深入理解和掌握这一技巧。通过实践，你将能够灵活运用Vue.js实现动态效果，提升用户体验。
通过上述代码示例，我们可以清晰地看到如何使用jQuery的`hide()`和`toggle()`方法来实现相机品牌列表的显示隐藏功能。这种技术不仅可以应用于相机品牌的展示，还可以扩展到其他类似的场景中。同时，jQuery的强大选择...
此外，了解如何隐藏或显示明细数据，以及设置条件格式，将增强数据的可读性。 "第5章：数据透视分析"则涉及到如何利用数据透视表进行深度分析。这里可能包含过滤、排序和分组数据的方法，以便发现数据中的模式和...
这个"js的练习案例"集合提供了一系列实例，旨在帮助初学者掌握JavaScript的基础知识和常见操作，如控制图片显示、图片切换、元素的显示与隐藏等。通过这些实践案例，学习者可以加深对JavaScript语法和事件处理的理解...
2. 显示原文和隐藏原文模式，帮助用户进行盲打练习。 3. 练习统计，如打字速度、正确率等，以便用户了解自己的进步。 4. 错误提示，指出用户输入错误的地方。 5. 多种语言支持，对于本例，包括了中文和英文。 安装...
6. **隐藏元素**: `display: none` 可以让元素完全不显示，并且占用的空间也会被移除，常用于动态隐藏和显示内容。 7. **实践操作**: "day10" 文件可能包含了第10天的学习代码示例，你可以通过查看、修改和运行这些...
3. 掌握图层管理，便于组织和控制设计元素的显示与隐藏。 4. 学习使用块（Block）和外部参照（Xref），以便复用常见的设计元素，如门窗、家具等。 5. 实践3D视图切换和渲染，理解空间立体感的表达。 6. 应用颜色和...
- 当用户开始练习时，隐藏原始文本，逐字符显示待打字的文本，同时清空输入框，让用户开始输入。 - 比较用户输入的字符与待打字文本的字符，如果匹配，则继续显示下一个字符；如果不匹配，提示错误并重新开始。 -...
软件可能提供显示或隐藏字母的选项，以帮助用户逐步实现盲打。同时，软件还会实时反馈用户的打字速度和错误率，以便用户了解自己的进步并针对性地改进。 除了基础的英文打字练习，软件还考虑到了汉语拼音的输入需求...
这可能包括隐藏当前位图并显示下一张位图，然后根据动画的顺序和循环设置重新显示第一张位图。为了平滑过渡，还可以添加淡入淡出效果，但这需要更复杂的绘图操作。 在绘图时，我们通常会使用`CDC`（Device Context...
每个组件都有其特定的功能，如主菜单是系统中所有应用程序的起点，程序启动器是 Linux 应用程序的启动链接，工作区切换器可以切换不同的工作区，窗口列表可以显示当前打开的应用程序，通知区域可以显示系统的更新...
屏幕更新时，文本对象会被绘制到指定位置，同时隐藏用户输入的部分或全部字符。 4. **音频处理**：为了提供反馈，项目可能包含了音频播放功能。当用户输入正确时，播放一个音效以示鼓励；反之，若输入错误，播放另一...
6. 蒙版应用：蒙版是PS中非常强大的功能，可以无损地隐藏或显示图层的某些部分。学习如何创建和编辑矢量蒙版、图层蒙版，以及如何使用快速蒙版进行选择区域的精修。 7. 文字编辑：PS不仅能够添加文本，还可以进行...