[英]Changing Color When Clicked
我想在点击时更改超链接的颜色。
我使用了以下代码并且它有效:
var current = "home";
function home()
{
current = "home";
update2();
}
function comp()
{
current = "comp";
update2();
}
function team()
{
current = "team";
update2();
}
function cars()
{
current = "cars";
update2();
}
function spons()
{
current = "spons";
update2();
}
function update2()
{
if (current == "home"){
document.getElementById('home').style.cssText='color:#FFE006;font-size:20pt;text- shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
} else if (current == "comp"){
document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('comp').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
} else if (current == "team"){
document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('team').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
} else if (current == "cars"){
document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('cars').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
} else if (current == "spons"){
document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
document.getElementById('spons').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
}
}
实际上,它起作用但出现了问题。 如您所见,当current
设置为home/spons/cars/team/comp
时,我尝试更改颜色,大小和文本阴影等属性。 当用户单击超链接时调用函数时current
更改。
出现问题,因为我告诉它在以下情况下执行相同的属性:hover
。 单击按钮后,其属性将更改,其他超链接也将更改为白色和18磅大小。
现在,一旦用户点击超链接,它就会更改框架的源,它自己的属性和其他超链接的属性。 但是一旦我点击它然后悬停在另一个超链接上,悬停的属性不起作用,但javascript的属性工作。
如果您无法理解我的问题,请查看http://www.xphoenix1.hpage.com/ 。 单击一个菜单按钮后,它也会更改其他按钮属性并停止悬停属性。
如果你能够理解我在说什么并找到解决方案,那么请回答。
先感谢您
为了公平起见,他们想要影响一些不仅仅是文字颜色的变化。 并且,不幸的是, 访问状态的大多数样式不再像过去那样有效 。
除了字体颜色之外,它们还使字体大小更大并添加/删除文本阴影。
虽然,我同意,这种JS方法有点过头了。
我对OP的建议是菜单链接实际上是单独的页面,而不仅仅是交换div。 然后,您可以通过任何方式将“当前”类移动从链接移动到链接 - 即使是静态HTML,也可以手动移动。 然后根据它来设置样式:
a.current { //styles }
这种方式导致出错的可能性要小得多,导航只能用于HTML和CSS - 不需要JS。
这在css中很简单
a:hover{background-color:yellow;}
为超链接写文字颜色,这样写
a:visited{
color:red;
}
更新:
好吧,如果你想使用JQuery,我们的想法是你将菜单作为<li>
或任何其他元素,并将这些图像作为背景图像。 当您创建图片时,白色文本和黄色一个在其他下方(CSS spriting),单击菜单,您将一个名为selected的类添加到当前元素并移动上面的图像,以便显示黄色文本,然后删除从所有其他菜单中选择的类。 例如,我使用了<a>
标签。
.menu a{
background-image:url('images/button.png');
}
.menu a.selected {
background-image:url('images/button.png'):0 -50px;
}
$(".menu a").live('click', function() {
$(".menu a").removeClass("selected");
$(this).addClass("selected");
return false;
});
在这里查看这篇文章
然后用
#home:visited, #comp:visited{
color:red;
}
或者更好,将所有相关的锚点应用于className,例如'rav'(访问后为红色;)),这样你就可以:
.rav:visited{ color:red; }
干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.