Question

我有平滑的滚动脚本：

<!-- Smooth scroll JS -->
<script type="text/javascript">
jQuery('a[href^="#"]').click(function(e) {

    jQuery('html,body').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);

    return false;

    e.preventDefault();

});
</script>

问题是它会影响到id的所有链接（按预期）并导致与切换脚本冲突。

我需要在脚本中添加一个条件，以便#work_tabs div中的链接不受影响。

        <div id="work_tabs">
             <ul>
              <li><a href="#films" class="navLink">Films</a></li>
              <li><a href="#tv_films" class="navLink">TV Films</a></li>
              <li><a href="#tv_shows" class="navLink">TV Shows</a></li>
              <li><a href="#special_events" class="navLink">Special Events</a></li>
            </ul> 
        </div>

我尝试自己添加条件，但我还是JS的新手，并且不知道如何实现这一点。

如何让脚本忽略work_tabs id中的链接？

Answer 1

您可以使用not()功能：

jQuery('a[href^="#"]').not('#work_tabs > a').click(function(e) {

    jQuery('html,body').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);

    return false;

    e.preventDefault();

});

这将排除该div内的所有锚标记。

了解更多here。

Answer 2

一种方法是在可以切换的项目中添加一个类，并将元素选择器更改为指向该项。

jQuery('.toggle').click(function(e) {

Answer 3

您可以使用jQuery .not()函数删除目标元素

使用jQuery('a[href^="#"]').not('#work_tabs > a')

<!-- Smooth scroll JS -->
<script type="text/javascript">
jQuery('a[href^="#"]').not('#work_tabs > a').click(function(e) {

    jQuery('html,body').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);

    return false;

    e.preventDefault();

});
</script>

向所有链接添加行为的JavaScript应排除一些

3 个答案: