-
JSP页面标签切换20
有两个标签，点击两个标签可以自由切换，标签是用图片代替的，初始化是显示第一个标签的内容的，如果点击第二个标签，第一个标签变灰，第二个标签变亮（即显示第二个标签的内容），请问这个效果怎么实现？
这是第一个标签的效果，第一个标签的图片亮，第二个标签图片灰。
这是第二个标签的效果！
2012年6月13日 09:23
添加评论
关注(0)5个答案 按时间排序 按投票排序
-
采纳的答案
你是不是想做一个tab效果啊？
你只要在点击第二个标签的时候，把第一个标签的样式去除，并把它给第二个标签就可以了。2012年6月13日 09:46
-
这个用jQuery来实现很简单的，
1、首先你要准备一个curr的样式，表示当前被选中了。
2、给那2个DOM节点注册点击事件，当点击了就改变按钮的样式。没有选择的就移除样式
下面是具体的实现代码
javascript代码：
$("selectId1").toggle(
function () {
$(this).addClass("curr");
},
function () {
$(this).removeClass("curr");
}
);
$("selectId2").toggle(
function () {
$(this).addClass("curr");
},
function () {
$(this).removeClass("curr");
}
);
html代码：
<a href="#" id="selectId1" class="icon_man">选帅哥</a>
<a href="#" id="selectId2" class="icon_girl">选美女</a>
这样就可以实现切换的效果了。用jQuery的toogle方法就是专门来出来这样的事件切换的。2012年6月15日 11:46
相关推荐
**标题：“标签(Tabs)实现多页面切换”** 在网页设计中，标签（Tabs）是一种常见的用户界面元素，用于组织和展示多个相关的但内容独立的部分。这种设计模式允许用户通过点击不同的标签来切换查看不同页面，提高用户...
Eclipse的`JSP`视图和`Java`视图可以帮助你轻松地在标签类和JSP页面之间切换，进行调试和优化。 通过这个Eclipse项目，你将能够深入理解JSP自定义标签的工作原理，如何编写和使用它们，以及如何在项目中整合这些...
在探讨“jsp图片切换代码”的知识点时，我们主要聚焦于如何在JSP（JavaServer Pages）页面中实现图片的自动切换或轮播效果。这段代码示例提供了在JSP环境中实现这一功能的具体方法，涉及了JavaScript、HTML以及CSS的...
这个主题“bootstrap实现页面切换”涉及到Bootstrap中的导航系统、模态框、分页以及平滑滚动等核心概念，这些都是构建交互性网页的重要元素。下面将详细阐述这些知识点。 1. **Bootstrap导航系统**：Bootstrap提供...
在本教程中，我们将探讨如何使用JavaScript实现Tab标签切换的效果，这是一种常见且实用的网页设计技术。 Tab标签切换允许用户通过点击不同的选项卡来展示不同的内容区域，提供了一种组织和展示大量信息的有效方式。...
4. **在JSP页面中使用自定义标签**：在JSP页面中，通过`<%@ taglib %>`指令引入自定义标签库，然后像使用标准JSP标签一样使用自定义标签。 ### 自定义标签的属性和事件 - **属性**：自定义标签可以接受属性，这些...
【标题】"jsp页面Table自动换行"涉及的是在JavaServer Pages (JSP) 技术中处理HTML表格（Table）的布局问题。在网页设计中，表格的换行通常是由于表格内容过多，超过了容器（如div或浏览器窗口）的宽度，导致表格...
文件名“标签切换.doc”可能包含了一个详细的文档，涵盖了这个标签切换效果的实现步骤、代码示例、以及可能的自定义选项。文档可能包括以下内容： 1. HTML结构：解释如何设置`<div>`元素，以及如何为每个标签和内容...
"JSP分页标签"是一个专门为了简化JSP页面分页功能而设计的组件。它的主要目标是帮助开发者更加高效、便捷地实现数据的分页展示，提高用户体验，同时也减轻了开发工作量。 分页标签通常由两部分组成：标签库（Tag ...
本案例聚焦于一个特定的问题：在MyEclipse 2017中，当在JSP页面中使用`<c:if>`标签时，导致其后面的代码显示颜色异常，即一半是黑色，一半是彩色。这个问题主要涉及到两个核心技术点：JSP和`<c:if>`标签。 首先，...
正确理解和使用其基本结构、属性和事件，能让你的JSP页面变得更加专业和用户友好。在使用过程中遇到问题时，查阅官方文档或社区资源通常都能找到解决方案。记得保持代码整洁，合理组织页面结构，这样可以提高代码的...
使用JPage标签时，首先需要在JSP页面中引入标签库，然后在页面中使用对应的标签。标签的属性通常包括当前页码、每页记录数、总记录数等，这些参数需要根据实际的查询结果动态设置。 5. **优点**： - 提高代码复用...
3. 自定义标签：在JSP页面上，我们可以使用自定义标签来实现分页界面。自定义标签提供了更灵活的方式，可以封装分页逻辑，使其复用性更强。创建一个自定义标签库（Tag Library），定义一个名为`pager`的标签，它接收...
用jsp写的一个类似标签切换Div的页面效果.
3. **JSP页面使用**：在JSP页面中，我们通过`<%@ taglib %>`指令引入标签库，并使用`<mytag:customTag>`这样的语法来调用自定义标签。分页标签可能看起来像`${currentPage}" totalPages="${totalPages}"/>`，其中`${...
### MyEclipse小技巧：使JSP页面支持泛型 #### 背景与概述 在Web开发过程中，为了提高代码的复用性和灵活性，Java引入了泛型机制。但在默认情况下，JSP页面并不直接支持Java泛型，这可能会导致在编写含有泛型的...
JSP页面可能有一个搜索表单或者分页导航，当用户输入查询条件或切换页码时，会向Controller发送请求，Controller调用Service获取数据，再返回到JSP页面进行展示。 4. **更新（Update）**：对于编辑操作，JSP页面...
()">切换页面 function changeFrameSource() { var frame = document.getElementById('contentFrame'); frame.src = 'anotherPage.jsp'; } ``` 在这个示例中，点击按钮会触发JavaScript函数，改变`...
这个标签在TLD中定义，对应的Java类处理数据获取和输出逻辑，而JSP页面只需要插入该标签即可显示用户信息，无需关心具体实现细节。 5. **实战应用：** - **安全分面**：可以创建一个处理权限检查的分面标签，确保...
4. 数据展示：在JSP页面上，使用`<c:forEach>`标签遍历从后台传来的数据，并进行展示。`<c:forEach>`是JSTL（JavaServer Pages Standard Tag Library）的一部分，用于简化循环结构的代码。 5. 页码导航：创建页码...