Question

如果点击，我需要更改链接的颜色。

如果我使用event.preventDefault();颜色永久应用但链接不起作用，那么uri不会被传递然后我不能使用$_GET['route']因为我使用mod_rewrite重定向所有uri的到这个$_GET var。 ^(.*)$ 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");
});

Answer 1

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

a:visited { color: #f00; }

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

HTML

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

CSS

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

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

Answer 2

您可以在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
});

Answer 3

尝试使用

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

并将锚标记的href更新为“＃”。即。

<a href="#"

Answer 4

您无法执行此操作，因为您已被重定向到某个页面。所有对象类都将重置。

但您可以将其放在$(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并添加某个类。

Answer 5

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

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

无论如何你仍然可以有其他选择。

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

现在，此时您的重定向将开始行动，因此如果前一次点击通话中的链接颜色已经更改，则无法获取，因此session可以为您提供帮助。

在click event内进行ajax调用，只需在页面重定向检查已设置session variable的会话后立即设置during ajax call，然后在session已经存在的情况下添加类。

在没有preventDefault（）的情况下更改链接颜色onclick

5 个答案:

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