0

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

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

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 pt 大小。

现在，一旦用户点击一个超链接，它就会改变一个框架的来源、它自己的属性和其他超链接的属性。但是，一旦我单击它然后将鼠标悬停在另一个超链接上，悬停的属性就不起作用，但 javascript 的属性起作用。

如果您无法理解我的问题，请查看http://www.xphoenix1.hpage.com/。单击一个菜单按钮后，它也会更改其他按钮属性并停止悬停属性。

如果您能够理解我在说什么并有解决方案，那么请回答。

先感谢您

4

4 回答 4

1

这在 css 中很简单

a:hover{background-color:yellow;}
于 2012-10-30T14:38:11.600 回答
1

公平地说，他们希望影响一些不仅仅是文本颜色的更改。而且，不幸的是，大多数:visited 状态的样式不再像以前那样工作了。

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

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

我对 OP 的建议是让菜单链接实际转到单独的页面，而不仅仅是换出 div。然后，您可以通过任何您希望的方式将“当前”类从链接移动到链接——即使这是静态 HTML，也可以手动移动。然后相应地设置它的样式：

a.current {  //styles }

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

于 2012-09-28T12:18:02.893 回答
0

为超链接写文字颜色，这样写

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;
});

在这里查看这篇文章

于 2012-09-28T11:57:57.730 回答
0

然后使用

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

或者更好的是，使用类名应用所有相关的锚点，例如'rav'（访问后红色;））这样你就可以做到：

.rav:visited{ color:red; }

干杯!

于 2012-09-28T12:17:48.863 回答