关于显示全部标签和部分标签的效果例子如下（锋利的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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//从第5条开始隐藏后面的li，最后一个li除外
var $category=$("ul li:gt(5):not(:last)");
$category.hide();
//点击show all时执行全部显示操作，并把文本改为show some,并高亮推荐的li
var $toggleBtn=$("div.showmore >a");
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide();
$(".showmore a span").text("show all");
$("ul li").filter(":contains('bb'),:contains('cc'),:contains('dd')").removeClass("promoted");
}else{
$category.show();
$(".showmore a span").text("show some");
$("ul li").filter(":contains('bb'),:contains('cc'),:contains('dd')").addClass("promoted");
}
return false; //超链接不跳转
});
});
</script>
<style type="text/css">
.Box{
width:400px;
height:250px;
margin:0 auto;
text-align:center;
border:#CC3300 double;
background-color:#FFCC00;
}
.Box ul{
list-style-type:none;
}
.Box ul li{
float:left;
margin:10px 20px 10px 20px;
}
.showmore{
width:80px;
height:25px;
border:double red thin;
background-color:#FF6633;
}
.showmore a{
text-decoration:none;
}
.div1{
margin:0 auto;
width:400px;
}
.promoted{
color:#0000CC;
background-color:#009900;
}
</style>
</head>
<body>
<div class="Box">
<ul>
<li><a href="#">aaa</a><i>(111)</i></li>
<li><a href="#">bb</a><i>(112)</i></li>
<li><a href="#">aaa</a><i>(113)</i></li>
<li><a href="#">cc</a><i>(114)</i></li>
<li><a href="#">aaa</a><i>(115)</i></li>
<li><a href="#">aaa</a><i>(116)</i></li>
<li><a href="#">aaa</a><i>(117)</i></li>
<li><a href="#">aaa</a><i>(118)</i></li>
<li><a href="#">aaa</a><i>(119)</i></li>
<li><a href="#">aaa</a><i>(120)</i></li>
<li><a href="#">aaa</a><i>(121)</i></li>
<li><a href="#">dd</a><i>(122)</i></li>
<li><a href="#">aaa</a><i>(123)</i></li>
<li><a href="#">aaa</a><i>(124)</i></li>
<li><a href="#">other</a><i>(125)</i></li>
</ul>
<br/>
<br/>
<div class="div1">
<div class="showmore">
<a href="more.html"><span>show all</span></a>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
本文将详细讲解如何在ggplot2中调整坐标轴的显示范围、标签和测度方法，这些都是制作高质量图表不可或缺的一部分。 首先，了解坐标轴在图形中的作用至关重要。坐标轴不仅提供了数据的量度信息，而且帮助人们解读...
它们通常由三部分组成：标签库描述符（TLD）、标签处理类（Tag Handler）和标签库文档（Tag Library Documentation）。TLD是XML文件，用于定义标签的属性、返回类型、事件等信息；标签处理类实现了自定义标签的逻辑...
设置标签的背景色和前景色是本示例的关键部分。我们使用setBackground()方法和setForeground()方法来设置标签的背景色和前景色。例如，我们将jlblBlack的背景色设置为白色，将前景色设置为黑色。 此外，我们还使用...
Struts标签库是Apache Struts框架的一部分，它提供了丰富的标签来处理常见的Web开发任务，如表单处理、显示数据、控制流程等。使用Struts标签，开发者可以避免在JSP页面中直接编写Java脚本，降低代码的复杂度。例如...
首先，`<pre>`标签内的JavaScript代码高亮显示插件通常是基于CSS和JavaScript实现的。这类插件通过解析`<pre>`标签内的代码，对关键字、变量、函数等进行不同颜色的标记，使得代码结构清晰，易于阅读。例如，...
通过深入理解以上知识点，开发者可以学习到如何在iOS应用中创建动态显示标签的界面，并掌握从外部数据源加载和显示数据的基本技巧。这个示例项目对于初学者来说是一个很好的学习资源，同时也为有经验的开发者提供了...
在GX-WORKS3中，我们创建全局标签，这是PLC内部共享的数据，可以在程序的不同部分使用，也可以用于与外部设备如威纶通触摸屏的数据交换。在“全局标签”区域，右键选择“导出至文件”，然后选择“导出至XML文件”。...
超链接是HTML标签中非常重要的一部分，它可以实现从一个页面指向另一个页面的跳转。超链接的语法包括： * 文字超链接：”被访问的路径” target=”何处打开文档” title=”显示额外信息”>名字 * 图像超链接：”...
8. `<xmp>`、`<plaintext>` 和 `<listing>`: 用于固定宽度的文本显示，其中`<plaintext>`不执行任何HTML标签，`<listing>`则保留部分格式。 ### 三、链接标签 `<a>` 1. `<a href>`: 基本的链接标签，`href`属性指向...
例如，`startPage`标签可能用于显示页面的开始部分，`endPage`标签则用于结束，而`previousPage`和`nextPage`标签则用于导航。 6. **传递数据到视图**：在Action类中，将分页信息（如总页数、当前页、每页大小等）...
标签云是一种数据可视化技术，它将标签以不同大小的字体或颜色显示，以反映标签的重要性和使用频率，常用于博客和网站上。有序化组织则是指通过算法对标签进行排序，使其更加有序，便于用户检索和浏览。 最后，文章...
Struts标签是Apache Jakarta Struts框架中的一部分，用于简化Java Web应用程序开发中的视图层构建。Struts标签库提供了一组预定义的JSP标签，这些标签有助于开发者更有效地处理常见的Web开发任务，如表单处理、数据...
`Chromium核心的简单多标签浏览器源码CefWeb`文件可能包含了以下关键部分： 1. **主窗口类**：包含所有标签页的容器，以及创建、关闭和切换标签页的逻辑。 2. **标签页类**：封装单个`ChromiumWebBrowser`实例，...
总的来说，"Dreamwear显示struts标签插件"是提升Struts开发效率的有效工具，它使开发者能够在熟悉的Dreamweaver环境中更便捷地使用Struts标签，降低了学习曲线，提高了开发速度。对于大型项目或团队开发，这样的集成...
`TextViewWithLabel` 是一个自定义视图，可能是一个自定义类，继承自`TextView`，并添加了额外的功能来显示标签。`CDATA` 在XML中是CDATA段（Character Data）的缩写，用于包裹那些可能会被解析器误解为XML语法的...
3. **字符串处理**：滚动文本通常需要截取字符串的一部分进行显示，这需要掌握易语言中的字符串截取、拼接等操作。 4. **界面更新**：在改变标签文本后，需要更新界面以显示滚动效果。这涉及到界面控件的属性修改和...
它是.NET Framework的一部分，允许开发者在应用中嵌入Internet Explorer渲染引擎，用于加载和显示网页内容。 3. **多线程处理**: 为了确保浏览器在打开多个标签页时保持流畅，需要正确处理多线程。每个标签页可能在...
在罗克韦尔AB PLC RSLogix5000编程环境中，标签是极其重要的组成部分，它们作为数据存储和传输的媒介，使得程序的编写更加高效和可读。本篇文章将详细解析如何在RSLogix5000中创建标签以及如何使用标签进行编程。 ...
在JavaServer Pages (JSP) 技术中，自定义标签是扩展JSP功能的关键手段，它允许开发者创建可重用的组件，提高代码的可维护性和可读性。本实例将深入探讨如何实现一个简单的JSP自定义标签。 首先，自定义标签的实现...
导航标签（Navigation Tab）是网页布局的一部分，通常位于页面顶部或侧边，显示网站的主要部分或分类，方便用户快速跳转到相应页面。 2. 横向导航标签： 横向标签通常位于页面顶部，与页面宽度相匹配。这种布局...