Question

我只是想在我的导航中突出显示活动链接：

$("#navigation li").click(function(e) {
    e.preventDefault();
    $("#navigation li.active").removeClass("active");
    $(this).addClass("active");
});

我之前使用过这个脚本，但我遇到的问题是它在点击后突出显示活动链接但链接没有响应，点击后没有任何反应，它不会导航到页面。

这是我的 Fiddle ，因此您可以看到代码，但由于我们可以导航到其他页面，因此我觉得它毫无价值。这从未发生在我之前。有帮助吗？感谢。

Answer 1

您正在阻止默认操作：

e.preventDefault();

删除此链接将点击该链接。

然而，我问你为什么要用javascript更新用户界面，因为你会立即被重定向到另一个页面。

Answer 2

preventDefault（）用于防止出现默认行为。另一方面，如果页面导航，您的活动链接将不会更活跃，因为它是所有脚本操作的上一页。

您可以按以下方式进行操作 -

将所需的列表ID存储在localstorage中

$("#navigation li").click(function(e) {
     store('active_link', $(this).attr('id'));
 });

所需功能

function setup() {
        var tmp = get('active_link');
        if (tmp)
        {
        $("#navigation li.active").removeClass("active");
        $('#'+tmp).addClass("active");
        }
    } 
    function get(name) {
        if (typeof (Storage) !== "undefined") {
          return localStorage.getItem(name);
        } 
    }
    function store(name, val) {
        if (typeof (Storage) !== "undefined") {
          localStorage.setItem(name, val);
        } 
    }

现在在每个页面中，获取有效列表ID

$(document).ready(function(){
 setup();
});

Answer 3

删除e.preventDefault()后，我遇到了一个新问题。当我点击链接时，它突出显示，但是.active课程立即返回到主页链接。当<a href="#">与<a href="mypage.php">不同时。这个解决方案适合我：

$(document).ready(function() {
    var str = location.href.toLowerCase();
    $("#navigation li a").each(function() {
        if (str.indexOf(this.href.toLowerCase()) > -1) {
            $("li.active").removeClass("active");
            $(this).parent().addClass("active");
        }
    });
})

谢谢大家！

使用event.preventDefault（）后导航无效

3 个答案: