Javascript 单击时更改颜色

我想在单击超链接时更改其颜色

我使用了以下代码，并且它工作正常：

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

时，我尝试更改属性，例如颜色、大小和文本阴影<代码>当前在用户单击超链接时调用函数时更改

当它处于

：hover

状态时，当我告诉它执行相同的属性时，出现了一个问题。单击按钮后，其属性和其他超链接都将更改为白色和18磅大小

现在，一旦用户单击超链接，它将更改帧的源、其自身属性和其他超链接的属性。但一旦我单击它，然后将鼠标悬停在另一个超链接上，鼠标悬停的属性就不起作用，而javascript的属性起作用

如果你不能理解我的问题，那就看看。单击一个菜单按钮后，它还会更改其他按钮属性并停止悬停属性

如果你能理解我所说的，并有解决办法，那么请回答

---

提前谢谢你

为超链接写文本颜色，像这样写

a:visited{
    color:red;
    }

更新：

好的，明白了，如果你想使用JQuery，你的想法是将菜单作为

或任何其他元素，这些图像作为背景图像。当您创建图片时，白色文本和黄色文本都在另一个下面（CSS spriting），单击菜单，您将添加一个名为selected的类到当前元素，并将图像移到上面，以便显示黄色文本，然后从所有其他菜单中删除所选类。例如，我使用了

，然后使用

#home:visited, #comp:visited{
    color:red;
}

或者更好的方法是，使用类名应用所有相关的锚，例如“rav”（访问后为红色；）
因此，您可以：

.rav:visited{ color:red; }

干杯
 公平地说，他们想影响一些不仅仅是文字颜色的变化。不幸的是，大多数人都是这样

除了字体颜色外，他们还将字体大小调大一点，并添加/删除文本阴影

不过，我同意，这种JS方法有点过头了

我对OP的建议是让菜单链接实际转到单独的页面，而不仅仅是交换div。然后，您可以通过任何方式将“当前”类从一个链接移动到另一个链接，即使是手动，如果这是静态HTML。然后，只需相应地设计它：

a.current {  //styles }

这种方式大大减少了出错的可能性，导航功能只适用于HTML和CSS，不需要JS。
这在CSS中很简单

a:hover{background-color:yellow;}

a:visted{color:red}
对你来说还不够吗？为什么？这个解决方案就像用愤怒的小猫搭建梯子，在已经有门的情况下爬上墙。这就是为什么有些人认为JavaScript是邪恶的。答：访问是不够的，因为我的超链接实际上是我网站菜单上的按钮。他们改变了他们下面iframe的来源，我不想总是改变颜色，但直到没有点击另一个按钮。你能告诉我一种完全改变iframe类的方法吗js@XPhoenix在JQuery中，您可以通过.addClass（）方法来实现这一点，抱歉，不知道js。在js-document.getElementById（'id'）中找到它.className='class'；这就是我在开始这个只有一个页面的实验性网站之前的想法。我知道，如果一个网站的导航菜单的超链接仅仅改变了iframe的来源，那么它可能会出现一些问题，但我想尝试一下。请告诉我是否有办法解决这个问题，否则我将不得不放弃这个疯狂的想法。事实上，我的网站不需要js来更改页面，只需要以不同的方式显示当前页面：访问是不够的，因为我的超链接实际上是我的网站xphoenix 1.hpage.com菜单上的按钮。他们改变了他们下面iframe的来源，我不想一直改变它的颜色，但直到没有点击另一个按钮。你能告诉我一种完全改变JSA类的方法吗？一般来说，我会引导你远离你在网站上使用的基于框架的方法。我知道你想尝试一下，但这种方法有一些明显的缺点——访问者不能为任何特定的部分添加书签，搜索引擎可能无法为你的内容编制索引。至于交换特定链接上的类，您可能需要稍微更改标记，但类似的方法会起作用：实际上我正在使用.btns:（state）正如您的第二段代码所述，但是visited不是解决方案，因为超链接是我网站的按钮，更改按钮下的iframe的源，并且一旦我单击另一个超链接，visited不会删除它们的额外样式。您能告诉我一种完全更改JS类的方法吗？当然，您可以使用jQuery toggleClass（）（）$（“#home”）.toggleClass（“yourClassName”）在未应用时应用它，或在应用时删除它。
a:hover{background-color:yellow;}