javascript - Js 覆盖源代码中的超链接(W3Layouts 的 Cubicle 模板)

Question

我一直在尝试破解这个问题，每当我单击 << li >> 标签中的链接时，它都没有任何响应。

<div id="navbar" class="navbar-collapse navbar-right collapse">
<ul class="nav navbar-nav navbar-right cross-effect" id="cross-effect">

<li><a class="cross-effect" href="#features">ES Values</a></li>
<li><a class="cross-effect" href="#about">About ES</a></li>
<li><a class="cross-effect" href="#testimonial">ES Testimonials</a></li>
<li><a class="cross-effect" href="#stats">ES Stats</a></li>
<li><a class="cross-effect" href="http://www.google.com">ES Gallery</a></li>
<li><a class="cross-effect" href="/groups.html" target="_self">ES Groups</a></li>
<li><a class="cross-effect" href="/updates.html" target="_self">ES Updates</a></li>
<li><a class="cross-effect" href="/contact.html" target="_self">Contact ES</a></li>
                </ul>

请帮帮我。它来自 w3layouts 的隔间模板

Answer 1

我发现问题是因为您单击的那些内容不会导致您按 id 划分的此部分页面，导致另一个页面，并且您为平滑滚动而添加的动画甚至会触发在那些通向另一个页面的链接上，因此将一个类添加到具有 id 的列表中，例如，给出类测试并将代码更改为:

jQuery(document).ready(function($) {
				$(".scroll, .navbar li.test a, .footer li a").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});

<ul class="nav navbar-nav navbar-right cross-effect" id="cross-effect">
    <li class="test"><a class="cross-effect" href="#features">ES Values</a></li>
	<li  class="test"><a class="cross-effect" href="#about">About ES</a></li>
	<li  class="test"><a class="cross-effect" href="#testimonial">ES Testimonials</a></li>
 	<li  class="test"><a class="cross-effect" href="#stats">ES Stats</a></li>
    <li><a class="cross-effect" href="http://www.google.com">ES Gallery</a></li>
	<li><a class="cross-effect" href="/groups.html" target="_self">ES Groups</a></li>
	<li><a class="cross-effect" href="/updates.html" target="_self">ES Updates</a></li>
	<li><a class="cross-effect" href="contact.html" target="_blank" style="
    pointer-events: all;
">Contact ES</a></li>
					</ul>