仅当元素没有 href 时，更改元素的 "current" class 才有效

Question

我正在尝试制作一个导航栏，其中包含一些用于当前选项卡的 CSS 代码，并且它仅适用于没有要加载的页面的元素。

这是我的 HTML 代码：

<ul class="nav-menu" id="nav-menu">
     <li>
         <a class="current" href="home">Home</a>
     </li>
     <li>
          <a href="cars">Cars</a>
     </li>
     <li>
          <a href="#">T&C</a>
     </li>
     <li>
          <a href="#">Prices</a>
     </li>
     <li>
          <a href="#">Services</a>
     </li>
     <li>
          <a href="#"">Contact</a>
     </li>
</ul>

这是我的 jQuery 代码：

$('ul li a').click( function(){
     if ( $(this).hasClass('current') ) {
         $(this).removeClass('current');
     } else {
         $('li a.current').removeClass('current');
         $(this).addClass('current'); 
     }
});

正如我上面提到的，对于最后一个具有 href="#" 的元素，它工作得很好，但是当我按下一个具有 link 的元素时，它就不起作用了。

欢迎任何建议:)

Answer 1

不完全清楚你的意思，但我认为你需要禁用默认的 link 单击行为 event.preventDefault()。

将事件声明为点击函数中的参数。像这样：

$('ul li a').click( function(event){
...

并在函数的最开头写上event.preventDefault()。

完整代码如下：

$('ul li a').click( function(event){
    event.preventDefault();
     if ( $(this).hasClass('current') ) {
         $(this).removeClass('current');
     } else {
         $('li a.current').removeClass('current');
         $(this).addClass('current'); 
     }
});

Answer 2

当您单击 href="home" 或 href="cars" 时，浏览器将跟随 link，加载一个全新的页面。当您单击只有一个锚点 (href="#") 时，这是在页面内的导航，因此不会重新加载页面。

要在 home 或 cars 页面加载时突出显示这些导航条目，您需要运行在这些新页面上编写代码，以便在 DOM 已加载。¹

例如，在 home 页面上：

$("ul li a[href=home]").addClass("current");

¹ 如果您的目标是半现代环境，您可以在 <script src="..." defer> 标记中包含顶级代码。在现代环境中，您可以改用 <script type="module">。在旧环境中，只需将 script 标记放在主体的末尾，就在 </body>.

之前

仅当元素没有 href 时，更改元素的 "current" class 才有效

Changing the "current" class of an element only works if the element has no href

html

jquery

uinavigationcontroller