Question

因此，这主要起作用，但唯一可行的URL是指定为“博客”的内容。带＃的所有锚引用都是在点击时平滑滚动，但我页面上的所有外部链接都没有做任何事情。

我是否可以以仅包含带有“＃”的href链接的方式编写防止默认值？我在整个页面中都有图像链接等，想要一个简单的方法来管理它，而不是指出每个网址。

<ul class="snip1143">
<li class><a href="#home1" data-hover="Home">Home</a></li>
<li><a href="#about1" data-hover="About">About</a></li>
<li><a href="#experience1" data-hover="Work">Work</a></li>
<li><a href="URL HERE" data-hover="Blog">Blog</a>   </li
<li><a href="#contact1" data-hover="Contact">Contact</a></li>

<script>

 $(document).on('click', 'a', function(event) {
  if($(this).data('hover') !== "Blog"){
  event.preventDefault();


  $('html, body').animate({
  scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  });

</script>

Answer 1

var doc = document;
var myList = doc.getElementsByClassName("snip1143")[0];
var myListItems = myList.children;
var isHash = false;
var href;
for (var i = 0; i < myListItems.length; i++) {
  href = myListItems[i].firstChild.getAttribute('href');
  isHash = href.includes("#");
  if(!isHash){
    myListItems[i].firstChild.addEventListener('click', function(evt) {
        event.preventDefault();
    });
    myListItems[i].classList.add("strike");
  }
}

.strike{
  text-decoration: line-through;
}

<ul class="snip1143">
  <li><a href="#home1" data-hover="Home">Home</a></li>
  <li><a href="#about1" data-hover="About">About</a></li>
  <li><a href="#experience1" data-hover="Work">Work</a></li>
  <li><a href="URL HERE" data-hover="Blog">Blog</a> </li>
  <li><a href="#contact1" data-hover="Contact">Contact</a></li>
</ul>

Answer 2

直接在SO上编码，我希望我做对了：

$(document).on('click', 'a', function(e) {
  if ($(this).attr('href').indexOf('#') !== -1)
    e.preventDefault();
};

包含＃时禁用href链接，但启用所有其他链接

2 个答案: