JSP页面标签切换

有两个标签,点击两个标签可以自由切换,标签是用图片代替的,初始化是显示第一个标签的内容的,如果点击第二个标签,第一个标签变灰,第二个标签变亮(即显示第二个标签的内容),请问这个效果怎么实现?

这是第一个标签的效果,第一个标签的图片亮,第二个标签图片灰。
[img]http://dl.iteye.com/upload/attachment/0069/4830/072aae95-706d-32a1-bcfa-d739659d2916.jpg[/img]

这是第二个标签的效果!
[img]http://dl.iteye.com/upload/attachment/0069/4832/d998dc8c-b477-33f8-ba12-a0b01464c6ae.jpg[/img]

5个回答

你是不是想做一个tab效果啊?
你只要在点击第二个标签的时候,把第一个标签的样式去除,并把它给第二个标签就可以了。

lw900925
lw900925 谢谢,貌似我已经搞懂了!
7 年多之前 回复

让美工再做一套灰色的图片,单击的时候动态改变图片url

zyn010101
zyn010101 是啊,这是一种思路,还有一种思路,你动态改变图片的滤镜效果
7 年多之前 回复
lw900925
lw900925 请问这种效果怎么实现,就是讲原来灰色的图片替换成亮的图片!
7 年多之前 回复

当点击第二个标签的时候,就隐藏第一个标签的内容,显示第二个标签的内容啊。

就是一个显示隐藏的问题。

这得看美工的了

这个用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代码:
选帅哥
选美女

这样就可以实现切换的效果了。用jQuery的toogle方法就是专门来出来这样的事件切换的。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
JSP三个页面的切换问题求解
-
如何使用action标签实现 jsp页面跳转到servlet?
-
jsp页面中的表单提交数据,如果数据保存失败后转发回原来这个jsp页面,那么如何保留原来jsp页面中刚才表单中填写的内容?
-
有一个JSP页面 点击页面上的下载 按钮 把JSP页面的内容转化为PDF格式下载到本地
-
jsp页面<a>标签传参问题
-
jsp 页面图片自动切换代码
-
当前jsp中include 另外jsp页面时候,都加在另外的jsp页面的什么东西?
-
java拦截器跳转jsp页面的问题
-
springmvc中如何在当前jsp页面跳转到另一个jsp页面
-
为什么一个jsp页面获取另一个jsp页面保存的session值为空呢?
-
java后台Graphics生成图片,如何用<img>在jsp页面显示出来?
-
jsp页面为什么中文乱码错误,设置了格式,UTF-8
-
JSP File 标签 打开指定格式文件
-
在JSP页面中,通过JSTL标签获取到session中的值,如何获取两个值的乘积
-
代码在阿里云上,jsp页面实现图片的下载
-
如何将一个JSP页面的textarea的内容,在点击提交按钮后,输出到另一个JSP页面中
-
jsp页面加载JS文件后页面空白
-
请教:数据库存放的是自动生成的uuid,jsp页面上显示还是uuid,我想让jsp页面显示文本内容
-
jsp页面中点击日期,有时没有日期下拉选项,有时会出现日期下拉选项
-
Linux文件操作高频使用命令
文章目录0.新建操作:1.查看操作2.删除操作3.复制操作4.移动操作:5.重命名操作:6.解压压缩操作 0.新建操作: mkdir abc #新建一个文件夹 touch abc.sh #新建一个文件 1.查看操作 查看目录: ll #显示目录文件详细信息 查看文件内容: cat|head|tail命令 cat abc.txt #查看abc的内容 head -5 abc.txt #...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4. 反向代理5. 动静分离6.动静分离二、Nginx 的安装三、 Nginx 的常用命令和配置文件四、 Nginx 配置实例 1 反向代理五、 Nginx 配置实例 2 负载均衡六、 Nginx 配置实例 3 动静分离七、 Nginx 的高可用集群 前言 一、nginx简介...
【安全】Web渗透测试(全流程)
1 信息收集 1.1域名、IP、端口 域名信息查询:信息可用于后续渗透 IP信息查询:确认域名对应IP,确认IP是否真实,确认通信是否正常 端口信息查询:NMap扫描,确认开放端口 如果不会用Nmap,看这里:NMAP 基础教程(功能介绍,安装,使用) 发现:一共开放两个端口,80为web访问端口,3389为windows远程登陆端口,嘿嘿嘿,试一下 发现:是Window...
MySQL数据库—SQL汇总
一、准备 下文整理常见SQL语句的用法,使用MySQL5.7测试,参考了尚硅谷MySQL教程及用例。用例sql: 链接: https://pan.baidu.com/s/1tb3-12MRNFjV8drFlN6wzg&amp;shfl=sharepset 密码: fc2h 为了方便查阅可从右侧目录快速索引 二、DQL(Data Query Language)数据查询语言 1、语句顺序 书写顺序...
五款高效率黑科技神器工具,炸裂好用,省时间
loonggg读完需要4分钟速读仅需2分钟感觉我好久好久没有给大家分享高质量的软件和插件了。今天周末,难得在家休息一下,痛下决心,分享一些我认为的高效率工具软件给大家。废...
黑客入门,从HTB开始
Hack the box 是国外的一个靶机平台,里面的靶机包含多种系统类型,并且里面可以利用的漏洞类型多种多样,有很多靶机其实非常贴近实战情景。因此 HTB 是一个很好的学习渗透测试靶场。 之前在 HTB 也玩过一些机器。里面的机器难度有好几个档次,insane 难度的一般都是极其困难的,这种机器一般让我对着大神的 Writeup 我可能都没有办法复现出来。之前也有在公众号上分享过几篇 H...
动画:用动画给女朋友讲解 TCP 四次分手过程
作者 | 小鹿 来源 | 公众号:小鹿动画学编程 写在前边 大家好,我们又见面了,做为一个业余的动画师,上次的用动画的形式讲解 TCP 三次握手过程再各大平台收到了广大读者的喜爱,说文章有趣、有货、有内容,也受到了很多读者的关注。很多读者留言说什么时候用动画讲一讲 TCP 四次挥手的过程,为了应大家的要求,今天我们就生动有趣的用动画给大家分享 TCP 四次挥手(分手)过程。 动画:用动画给...
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
SQL基本语法入门 看这里就够了
SQL执行顺序 第一步:执行FROM 第二步:WHERE条件过滤 第三步:GROUP BY 分组 第四步:执行SELECT 投影列 第五步:HAVING条件过滤 第六步:执行ORDER BY排序 一、创建、删除库 -- 创建新数据库 CREATE DATABASE 数据库名; -- 删除数据库 DROP DATABASE 数据库名; 二、增加 1、添加列名、设置主键、设...
面试最后一问:你有什么问题想问我吗?
尽管,我们之前分享了这么多关于面试的主题: 高薪必备的一些Spring Boot高级面试题 面试必问:设计模式遵循的面向对象设计原则! 面试必问:怎么保证缓存与数据库的双写一致性? 27道高频Spring面试题,你能答对几个? 唠唠面试常问的:面向对象六大原则 一文高效图解二叉树面试题 Java面试中最高频的那20%知识点是什么? 百度面试题:求数组最大值 ... 然而,最后这个90%可见...
python 程序员进阶之路:从新手到高手的100个模块
在知乎和CSDN的圈子里,经常看到、听到一些 python 初学者说,学完基础语法后,不知道该学什么,学了也不知道怎么用,一脸的茫然。近日,CSDN的公众号推送了一篇博客,题目叫做《迷思:Python 学到什么程度可以面试工作?》,真实反映了 python 程序员在成长过程中的一些困惑。
Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成) one 樱花树 动态生成樱花 效果图(这个是动态的): 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch, ...
还在收集资料?我这里有个github汇总
原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,转载请保留出处。国内程序员都喜欢收集资料,但是又不看,github是重灾区。更有莫名其妙fork的,让人不得要...
阿里编程规范(简化版)
阿里编程规范 及 阿里Java开发规约插件 Alibaba Java Coding Guidelines 统一规范标准将有助于提高行业编码规范化水平,帮助行业人员提高开发质量和效率、大大降低代码维护成本。 2017年年初,首次公开了《阿里巴巴Java开发手册》,自从第一个版本起,倍受业界关注。为了让开发者更加方便、快速的将规范推动并实行起来,阿里巴巴基于手册内容,研发了一套自动化的IDE检测插件(...
我们这类学生并不是一无是处
我们这类学生并不是一无是处,更何况,个别学生还很聪明,真的很聪明。 主观能动性在于自己,自己的人生自己把握。其实并不需要给自己那么大的压力,毕竟,你三年后拿到的录取通知书和你当前所处学校的环境及师资息息相关,换句话讲,你将来的大学录取通知书就是你当前学校的环境及师资的具体体现。千万不要夸大个人努力。个人努力固然重要,但我们都是平凡人,我们的先天环境都很一般,这就好比小学生在高考数学中取得高分...
2020年秋招后端面经
主要包含华为,网易互娱,广联达,科大讯飞,浦发,中兴,上海农商行这些已经拿offer的,还有京东(不小心把二面时间换了一下,等通知等三个月了),虾皮(一面挂),顺丰(sp专场一面之后没消息,秋招第一个面试),携程的一些面经 文章目录1.自我介绍2.项目介绍3.接口和抽象类的区别相同点:不同点:4.多态5.重载和覆盖6.spring1.动态代理基于接口基于继承2.AOP2.1AOP3.IOC5.SS...
相关热词 c#多人合作开发项目策略 c# cad 坐标转换 c# 窗口内运行word c#线程睡眠 c# 静默打开打印机 c#获取当前路径的上一级 c# 去除线条 c# 取整倍数 c#窗体最大化控件不变 c# 程序更新程序案例