Question

让我们说有人点击：

<a href="#" class="filter">Stillness Furniture</a>

浏览器中的链接只会转到whatever.com/page /＃

以下是链接的代码框：

<nav id="portfolio-filter">
    <ul>
        <li class="filter"><a href="#" class="filter">View All</a></li>
        <li class="filter"><a href="#" class="filter">Stillness Furniture</a></li>
    </ul>
</nav>

我希望链接转到＃portfolio-filter而不仅仅是＃，现在显然我可以更改链接href，但这是一个WordPress主题并且编辑它意味着我每次更新主题时都必须更改它

当有人点击该链接时，我如何能够将浏览器跳转到ID＃portfolio-filter？

到目前为止，这是我的全部内容吗？

$(document).on("click", "a.filter", function(){
   //do something
});

（摘自Onclick function based on element id）

提前感谢您的帮助。

Answer 1

我可能会建议你，而不会改变你的锚：

＆＃13;

$(function () {
  $('a.filter').on("click", function( e ) {
    e.preventDefault();
    var offset = $('#portfolio-filter').offset().top;
    var visible_area_start = $(this).offset().top;
    var visible_area_end = visible_area_start + window.innerHeight;
    if(offset < visible_area_start || offset > visible_area_end) {
      $('html,body').animate({scrollTop: offset - window.innerHeight/3}, 1000);
    }
  });
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<p>a</p><br>
<a href="#" class="filter">Stillness Furniture</a>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<nav id="portfolio-filter">
    <ul>
        <li class="filter"><a href="#" class="filter">View All</a></li>
        <li class="filter"><a href="#" class="filter">Stillness Furniture</a></li>
    </ul>
</nav>

＆＃13;

Answer 2

如果我理解正确的话，你好像希望他们都去同一个地方。因此，如果您想要...，您可以重写链接。

$('#portfolio-filter').find('a.filter').attr('href', '#portfolio-filter');

jQuery：当人们点击＃link1时转发到URL＃link2

2 个答案: