jsp如何显示点击超链接后的图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsp如何显示点击超链接后的图片相关的知识，希望对你有一定的参考价值。
在网页中有一个图片框，旁边是多张图片的ID，我想做的就是点击一个ID，左边图片框就出现相对应ID的图片。请大家帮帮忙，帮小弟看下，小弟是初学者。
参考技术A 可以使用CSS定义，如下：-----------------------------------------------
A:link
COLOR: #036; TEXT-DECORATION: none
A:visited
COLOR: #036; TEXT-DECORATION: none
A:hover
COLOR: #f60; TEXT-DECORATION: underline
--------------------------------------------------
页面上
<a href="javascript:fff()" class="a" > <img src="xxxxx" /> </a> 参考技术B 建议你参考这个帖子，说了好几种方法
http://bbs.blueidea.com/thread-981334-1-1.html本回答被提问者和网友采纳 参考技术C 你有弄出效果吗
单击其他超链接时更改超链接颜色
【中文标题】单击其他超链接时更改超链接颜色【英文标题】：change hyperlink color while other hyperlink are clicked 【发布时间】：2016-01-01 16:18:45 【问题描述】：当点击其他链接时，如何将我的超链接颜色改回原来的颜色？超链接定位在同一页面上。
请查看DEMO
从上面的例子你可以看到，当点击苹果然后点击葡萄/香蕉..两者都变成了相同的颜色，因为（访问过）。单击任何链接时如何使其仅显示一种颜色（绿色）
【问题讨论】：
您可以使用a:active color: green 并在访问时保持蓝色
你不能完全用 CSS 来做到这一点，如果你将目标重定向到与点击的元素相同，你可以获得最好的效果。 Like so，尽管您失去了移动到目标位置的功能。否则你需要使用 JavaScript。
【参考方案1】：
当您定义所有 4 种状态时，您应该按以下顺序定义它们：
-
链接
已访问
悬停
活动
这解决了大约一半的问题。
a:link color: blue;
a:visited color: blue;
a:hover color: red;
a:active color: green;
另一半，让链接保持颜色，直到你点击其他东西，更难。之前单击的任何内容都没有内置状态，所以让我们制作一个。
首先，我们需要 jQuery，所以让我们导入它（通过 Google）。这在您的 HTML 的头部：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
在 jfiddle 中，您可以通过从左侧下拉列表中选择 jQuery 2.1.4 来添加它。
如果链接是最后点击的链接，我们可以通过提供此 JavaScript 来为链接添加一个类：
$(function()
$('a').click(function()
$('a.lastclicked').removeClass('lastclicked'); //remove class from previous link
$(this).addClass('lastclicked'); //add class to newly clicked link
);
);
最后，让我们调整 CSS 来进行着色：
a:link color: blue;
a:visited color: blue;
a:hover color: red;
a:active color: green;
a.lastclicked color: green;
如果您也希望将悬停颜色应用于最后点击的链接，则可以添加以下行：
a.lastclicked:hover color: red;
您可以在 in a Fiddle here 中看到所有这些。
【讨论】：
【参考方案2】：试试这个（复制和粘贴）：
Test.html:-
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<a class="fruit" href="#">apple</a></span>
<a class="fruit" href="#">grape</a></span>
<a class="fruit" href="#">banana</a></span>
<div style="height:500px"></div>
<a name="apple"> apple here</a>
<a name="grape"> grape here</a>
<a name="banana"> banana here</a>
</html>
style.css:-
a:link
color:blue;
a:visited
color:purple;
a:hover
color:orange;
a:focus
color:green;
a:active
color:red;
a:active
color:yellow;
【讨论】：
【参考方案3】：您可以使用jQuery 来做到这一点
$('body a:link').click(function()
$('body a').removeClass('active');
$(this).addClass('active');
);a:link
color: blue;
/* visited link */
a.active
color: green;
/* mouse over link */
a:hover
color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="fruit" href="#apple">apple</a></span>
<a class="fruit" href="#grape">grape</a></span>
<a class="fruit" href="#banana">banana</a></span>
<div style="height:500px"></div>
<a name="apple"> apple here</a>
<a name="grape"> grape here</a>
<a name="banana"> banana here</a>【讨论】：
除了jquery还有其他方法吗？ 我认为在 CSS 中没有比 jQuery 更好的解决方案，但在 CSS 中:active 和 :focus 选择器给了我们有限的解决方案。以上是关于jsp如何显示点击超链接后的图片的主要内容，如果未能解决你的问题，请参考以下文章