选择链接时如何更改链接的颜色？答案

【问题标题】：How to change link's color when link is selected?选择链接时如何更改链接的颜色？
【发布时间】：2009-11-03 00:52:28
【问题描述】：

如何在选择链接后更改链接的颜色，以使其保持新颜色，但仅在选择另一个链接之前，它会变回来。我是初学者。我找到了这个链接Changing the color of a selected link that is embedded in a table

但它使我的链接停止工作....它们改变颜色，但不链接任何东西，然后当我删除脚本时，它们工作正常。我做错了什么/我必须改变什么才能使这项工作？

谢谢！儿子。

【问题讨论】：

通常您会在标签中指定语言（例如，HTML、CSS、PHP 等）您使用什么语言？

标签： javascript html css

【解决方案1】：

如果您想使用它向用户显示他/她在您网站上的哪个子页面，您必须使用某种服务器端编码（例如：PHP、ASP、ASP.NET、Python、Ruby或类似的）为与当前页面对应的元素分配一个特定的类。

这样做的原因是，Javascript 不能在不同的页面加载之间存储，所以当点击链接并用 Javascript 更改时，这将在新页面（您刚刚请求的）加载时被重置。

如果您的网站仅包含几个平面 HTML 页面，您最好手动将类添加到正确的菜单项。

如何安排菜单的示例：

page1.html

<ul id="menu">
    <li><a href="page1.html" class="activeSection">Menuitem 1</a></li>
    <li><a href="page2.html">Menuitem 2</a></li>
    <li><a href="page3.html">Menuitem 3</a></li>
    <li><a href="page4.html">Menuitem 4</a></li>
</ul>

page2.html

<ul id="menu">
    <li><a href="page1.html">Menuitem 1</a></li>
    <li><a href="page2.html" class="activeSection">Menuitem 2</a></li>
    <li><a href="page3.html">Menuitem 3</a></li>
    <li><a href="page4.html">Menuitem 4</a></li>
</ul>

注意class="activeSection" 的位置 - 这决定了 CSS 的应用位置，从而改变了所选页面的外观。

【讨论】：

【解决方案2】：

您可以从您链接到的帖子中接受的答案中删除“return false”。通过在此处设置“return false”，可以防止链接的默认操作发生。

我还发布了来自 original post 的代码的修改版本，并接受了解决方案以避免循环遍历文档中的所有链接。

<head>
<script>
var selectedEl;

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
        // Change the last selected element to unselected
        selectedEl.className = 'unselected';
        // Change the selected element to the current element
        selectedEl = el;
        // Change the classname of the selected element to 'selected'
        selectedEl.className = 'selected';
    }
}
</script>
<style>
 .selected { background: #f00; }
</style>
</head>
<body>
    <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a>
</body>

【讨论】：

【解决方案3】：

$("a.selector").click(function()
{
    $("a.focused").removeClass('focused');
    $(this).addClass('focused');

    // do other click event stuff...

    return false;
});

【讨论】：

【解决方案4】：

使用jQuery Javascript插件你应该可以使用下面的代码来达到你想要的效果：

$("a").click(function()
{
     $("a.clicked").removeClass("clicked")
     $(this).addClass("clicked");
}

【讨论】：