javascript - 如何从 jQuery 点击处理程序中排除菜单链接？

Question

我的项目使用一个简单的切换菜单，我需要从执行滚动动画和 URL 修改的点击处理程序中排除最后一个链接 (#blog)。

这是 HTML:

<nav class="navbar">
            <span class="navbar-toggle" id="js-navbar-toggle">
                <i class="fas fa-bars"></i>
            </span>
            <ul class="main-nav" id="js-menu">
                <li>
                    <a href="index.html" class="nav-links">Home</a>
                </li>
                <li>
                    <a href="#about" class="nav-links">About</a>
                </li>
                <li>
                    <a href="#skillset" class="nav-links">Skillset</a>
                </li>
                <li>
                    <a href="#portfolio" class="nav-links">Portfolio</a>
                </li>
                <li>
                    <a href="#contact" class="nav-links">Contact</a>
                </li>
                <li>
                    <a id="blog" href="#https://anzudev.blogspot.com/" target="_blank" class="nav-links">Blog</a>
                </li>
            </ul>
        </nav>

这里是 jQuery:

$('nav a[href*="#"]').not("#blog").on("click", function () { 
$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top }, 1000);
  });

我已向所有导航链接添加了一个 jQuery 单击处理程序，以便平滑滚动到该部分并相应地修改 URL。但是，我需要排除 #blog 导航链接，因为它会重定向到外部站点。我尝试过以下选择器:

 - $('nav a[href*="#"]').not("#blog")
 - $('nav a[href*="#"]').not(":last")

但点击“#blog”后仍会尝试访问 myurl.com/# https://anzudev.blogspot.com/而不是外部链接。

我有一个简单的代码模型 here on Codepen用于测试。

关于我在这里做错了什么有什么建议吗？干杯!

Answer 1

您只需删除博客链接 URL 开头的 # 即可:

https://anzudev.blogspot.com/

而不是

#https://anzudev.blogspot.com/

任何以 # 开头的内容都将附加到当前页面 URL 的末尾。

正在编辑的CodePen:https://codepen.io/liquidmetalrob/pen/gObzvOg?editors=1010