Question

如何在选择链接之后更改链接的颜色，以便它仍然是新颜色，但只有在选择了另一个链接之后，它才会变回。我是初学者。我找到了这个链接Changing the color of a selected link that is embedded in a table

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

谢谢！子。

Answer 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的位置，它会更改所选页面的外观。

Answer 2

您可以从已关联的帖子中的已接受答案中删除“return false”。通过在那里“返回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>

Answer 3

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

    // do other click event stuff...

    return false;
});

Answer 4

使用jQuery Javascript插件，您应该能够使用以下代码来实现所需的效果：

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

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

4 个答案:

page1.html

page2.html