被点击的链接必须保持活动状态

Question

我需要使点击的链接处于活动状态。 我在下面有以下代码，我尝试了不同的脚本代码来激活链接，但它似乎不起作用。 似乎是什么问题？

 $("a").click(function () { if ($(this).hasClass("active")) { $(this).removeClass("active"); } else { $(this).addClass("active"); } });

 nav ul li a:hover, nav ul li a.active { color: #23dbdb; }

 <nav> <ul> <li><a class="active" href="Login.html" target="dest">Home</a></li> <li><a href="buttonsstudent.html" target="dest">Result</a></li> <li><a href="card4.html" target="dest">Subjects</a></li> <li><a href="aboutpage.html" target="dest">About</a></li> </ul> </nav>

Answer 1

a标签具有重定向而不是停留在同一页面上的默认属性。 因此，当我们单击a ，该功能甚至会在我们的代码之前执行，因此我们的更改不会按预期工作。 这是您的代码中唯一缺少的部分，否则您的代码会按预期工作。 但是，一次将有不止一个活动课程。 所以我做了一些改变如下：

• 从所有同级链接中删除active类
• 仅为相应的链接添加active类。

通过这种方式，您的代码将像正常网站一样工作。

 $('a').click(function(event){ event.preventDefault(); $('.red-links li a').removeClass('active') $(this).addClass('active'); })

 nav ul li a:hover, nav ul li a.active{ color: #23dbdb; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul class='red-links'> <li><a class="active" href="Login.html" target="dest">Home</a></li> <li><a href="buttonsstudent.html" target="dest">Result</a></li> <li><a href="card4.html" target="dest">Subjects</a></li> <li><a href="aboutpage.html" target="dest">About</a></li> </ul> </nav>

Answer 2

将前级得到li a.active和removeClass从它。 您也可以在删除类之前进行验证以检查是否存在元素li a.active

 $('a').click(function() { $('li a.active').removeClass('active') $(this).addClass('active') })

 nav ul li a:hover, nav ul li a.active { color: #23dbdb; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li><a class="active" href="Login.html" target="dest">Home</a></li> <li><a href="buttonsstudent.html" target="dest">Result</a></li> <li><a href="card4.html" target="dest">Subjects</a></li> <li><a href="aboutpage.html" target="dest">About</a></li> </ul> </nav>

Answer 3

我提出了一个使用一行代码 jquery 的解决方案，其中active类从所有a删除，不包括当前a ，其中添加了active类。

方法not()将排除当前a 。

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

 nav ul li a:hover, nav ul li a.active { color: #23dbdb; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li><a class="active" href="Login.html" target="dest">Home</a></li> <li><a href="buttonsstudent.html" target="dest">Result</a></li> <li><a href="card4.html" target="dest">Subjects</a></li> <li><a href="aboutpage.html" target="dest">About</a></li> </ul> </nav>

Answer 4

您可能只需要:focus使用此功能。 不需要 JavaScript / jQuery。

 nav ul li a:hover, nav ul li a:active, /* :active pseudo class instead of custom class 'active', just in case */ nav ul li a:focus { color: #23dbdb; }

 <nav> <ul> <li><a class="active" href="Login.html" target="dest">Home</a></li> <li><a href="buttonsstudent.html" target="dest">Result</a></li> <li><a href="card4.html" target="dest">Subjects</a></li> <li><a href="aboutpage.html" target="dest">About</a></li> </ul> </nav>