在没有 preventDefault() 的情况下更改链接颜色 onclick答案

【问题标题】：Change link color onclick without preventDefault()在没有 preventDefault() 的情况下更改链接颜色 onclick
【发布时间】：2013-02-18 05:23:04
【问题描述】：

点击后我需要更改链接的颜色。

如果我使用 event.preventDefault(); 永久应用颜色但链接不起作用，则 uri 未通过，然后我无法使用 $_GET['route']，因为我使用 mod_rewrite 将所有 uri 重定向到此 @987654323 @变量。 ^(.*)$ index.php?route=$1

如果我不使用 event.preventDefault 链接有效并且部分更改，但 addClass 仅在我单击时应用，然后消失...

我怎样才能得到这两种行为？能否通过URI（HREF），并永久更改颜色onClick？

html:

<a href="./section">Section</a>

css:

.active { color: #f00; }

jquery：

$('a').on('click', function(event) {
    //event.preventDefault
    $(this).addClass("active");
});

【问题讨论】：

标签： javascript jquery html css events

【解决方案1】：

您可以在doc ready 中尝试此操作，无需指定任何.click() 事件：

试试小提琴：http://jsfiddle.net/cmwt8/

$(function(){
    var url = window.location.href; // url should be this way 'http://aaa.com/page/section'
    var link = url.substr(url.lastIndexOf('/') + 1); // then you get here 'section'
    $('[href*="' + link + '"]').addClass("active"); // if found add the class
});

【讨论】：

谢谢！有用。你是对的，事件发生后添加类更容易：$

【解决方案2】：

你不需要做任何JavaScripting。您只需要以下 CSS

a:visited { color: #f00; }

编辑。如果您只想针对要突出显示的特定链接，请在<a> 链接中添加一个类，即

HTML

<a class="sticky" href="./section">Section</a>

CSS

a.sticky:visited  { color: #f00; }

这样，只有您想保持粘性的超链接才会应用颜色

【讨论】：

【解决方案3】：

你不能这样做，因为在你被重定向到一个页面之后。所有对象类都将重置。

但你可以把它放在你的$(document).ready()

var page = window.location.pathname.split('/').pop();
$('a[href$="' + page + '"]').addClass('active');

现在这是作为页面加载示例的作用

<a href="hello.php">test</a>

作为页面加载。 page 将获得您的最后一个网址。 www.mysite.com/hello.php 并会找到一个 a 将匹配 url 并添加某些类。

【讨论】：

它发生在模板页面中，导航链接不会重定向或重新加载页面，我正在使用 mod_rewrite 并且 PHP 包含。

【解决方案4】：

你不能这样做，因为它的自然点击行为。

如果您使用preventDefault()，这意味着您正在强制自然行为按照您的规则工作。

无论如何，您仍然可以有一些选择。

$('a').on('click', function(event)
{
    var href = $(this).attr('href');
    event.preventDefault
    $(this).addClass("active");
    window.location = href;
});

此时，您的重定向将生效，因此您无法获取链接颜色是否已在之前的点击调用中更改，因此 session 可以为您提供帮助。

在 click event 内部进行 ajax 调用，现在在页面重定向检查您已设置 during ajax call 的会话后设置 session variable 然后添加类，如果 session 已经存在。

【讨论】：

【解决方案5】：

尝试使用

    $('#elementID').on('click', function(event) {
        event.preventDefault();
        $(this).addClass("active");
        window.location.href="./section";
    });

并将锚标签的href更新为“#”。即

<a href="#"

【讨论】：

如何将.active 类添加到带有此代码的新页面？