在其中一条评论中标记<a> add click and how to add attr &#34;active&#34;

Question

I want to add click for tags <a> and at the same time add attribute "active" for the current <a>;

I had done it like this, but it doesn't work:

HTML:

<div class="leftFocus">
<a class="leftFocusItem active" href="/" ><i class="fa fa-fire mr5 text-red fa-fw"></i>今日动态</a>
<a class="leftFocusItem" href="/recommend"><i class="fa fa-user-plus mr5 text-violet fa-fw"></i>您的关注</a>
<a class="leftFocusItem" href="/activity" ><i class="fa fa-gamepad mr5 text-blove fa-fw"></i>热门活动</a>
<a class="leftFocusItem" href="/rank" ><i class="fa fa-trophy mr5 text-yellow fa-fw"></i>排行榜</a>
</div>

JS:

$(document).ready(function(){
"use strict";
$('.leftFocus a').on('click', function(){
$(this).addClass('active').siblings('.leftFocusItem').removeClass('active');
});
 });

How should to write the right js for this problem?

Answer 1

您的逻辑很好，但是一旦浏览器加载新页面，您将失去所选择的内容。

您可以在代码中添加preventDefault()以阻止浏览器关注该链接，但链接将无效;）

$(document).ready(function(){
    "use strict";
    $('.leftFocus a').on('click', function(e){
        // link will have correct class but no longer will navigate
        e.preventDefault();
        $(this).addClass('active').siblings('.leftFocusItem').removeClass('active');
    });
});

看起来你应该检查一下当前路径是哪个链接并在其上设置类，如下所示：

"use strict";
$(document).ready(function(){
    document.querySelectorAll('.leftFocus a').forEach(function (link) { 
        if (link.href === window.location.href) { 
            link.classList.add('active'); 
        } 
    }); 
});

Answer 2

单击链接会使浏览器离开当前页面并加载新页面。

您对当前页面所做的任何DOM修改都将丢失。

您需要在新页面中添加类。理想情况下，您可以使用服务器端代码执行此操作，但您可以通过将location.href与菜单中每个链接的href属性进行比较来使用客户端JavaScript。