Question

<div class="filter-portfolio pull-right">
  <ul>
    <li class="always-visible">
      **<a href="#">**Categories <span class="icon-caret-down"></span></a>
    </li>
    <li>
      <a href="#" data-filter=".all">All</a>
    </li>
    <li>
      <a href="#" data-filter=".fashion">Fashion</a>
    </li>
    <li>
      <a href="#" data-filter=".nature">Nature</a>
    </li>
    <li>
      <a href="#" data-filter=".animals">Animals</a>
    </li>
    <li>
      <a href="#" data-filter=".arch">Architecture</a>
    </li>
  </ul>
</div>`

Whenever I click on the <a href="#">**Categories</a> link it is redirecting me to the index.php/#. Can anyone help me find out why it's happening ?

Answer 1

单击锚点时，#符号会将页面滚动到顶部，并将哈希符号添加到URL，如果您不想这样做，请阻止它

$('a[href="#"]').on('click', function(e) {
    e.preventDefault()
});

Answer 2

阻止默认点击处理程序：

$('.filter-portfolio a[href="#"]').on('click', function(event) {
  event.preventDefault();
});

Answer 3

你也可以省略这样的href属性，你不需要任何javascript。

像这样：

<a data-filter=".all">All</a>

<a href="#"> link redirecting to index. php?

3 个答案: