Question

当我将jquery页面淡出并淡入时，我在同一页面上遇到id＃链接问题。当我只是使用普通的HTML时，它运行正常。

要澄清：我有相同的部分，并在顶部的导航区域中有一个链接向下滚动到页面的下半部分。当jquery代码作为单独的js文件或链接向下滚动的html页面的一部分（我想要这样做）包含在内时，它也会淡出我不希望它做的事情。

听到jquery淡入淡出代码：

jQuery('body').css('display','none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('a').on('click',function(event){
var thetarget = this.getAttribute('target')
if (thetarget != "_blank"){
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function(){
window.location = thehref
});
}
});
});
setTimeout(function(){
jQuery('fade').fadeIn();
},1000)

无效的Html代码

      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" 
href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="about.html">About</a>
      </li>

我是否针对错误的元素。我也试图改变无济于事。

需要帮助！

Answer 1

提示：不要将事件监听器（onclick）绑定到所有<a></a>标记。只需使用它的特定ID或类名将其绑定到一个！

所以我编辑了这一行：

jQuery('a').on('click', function(event)

到

jQuery('#about').on('click', function(event)

并将 ID =“about”标记添加到您的链接中。

jQuery('body').css('display', 'none');
jQuery(document).ready(function() {
  jQuery('body').fadeIn();
  jQuery('#about').on('click', function(event) {
    var thetarget = this.getAttribute('target')
    if (thetarget != "_blank") {
      var thehref = this.getAttribute('href')
      event.preventDefault();
      jQuery('body').fadeOut(function() {
        window.location = thehref
      });
    }
  });
});
setTimeout(function() {
  jQuery('fade').fadeIn();
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-item">
  <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
  <a id="about" class="nav-link js-scroll-trigger" href="https://google.com">About</a>
</li>

如果您不想要此结果，编辑可以帮助您解决问题。因为至少你让我完全糊涂了。只是让我知道你的问题是什么。：）

当包含jquery页面淡入淡出时，同一页面上的滚动id＃无法正常工作

1 个答案: