javascript - 单击时更改颜色

Question

我想在单击超链接时更改它的颜色。

我使用了以下代码并且它有效:

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/ .单击一个菜单按钮后，它也会更改其他按钮的属性并停止悬停属性。

如果你能看懂我说的并且有解决办法，那么请回答。

提前谢谢你

Answer 1

为了公平起见，他们想要影响一些不仅仅是文本颜色的变化。而且，不幸的是，大多数styling of the :visited state no longer works as it once did .

除了字体颜色之外，他们还使字体变大了一点，并添加/删除了文本阴影。

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

我对 OP 的建议是让菜单链接实际转到单独的页面，而不仅仅是交换 div。然后，您可以通过您希望的任何方式将“当前”类从一个链接移动到另一个链接——如果这是静态 HTML，甚至可以手动操作。然后相应地设置样式:

a.current {  //styles }

这种方式大大降低了出错的可能性，并且导航仅适用于 HTML 和 CSS - 不需要 JS。