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

标签 javascript jquery

我有一个休闲的平滑滚动脚本:

<!-- 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 中的链接?

最佳答案

您可以使用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 内的任何 anchor 标记。

阅读更多 here .

关于为所有链接添加行为的 JavaScript 应该排除一些,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32146640/

相关文章:

javascript - 选择给定元素之前和之后的 div 内容

javascript - litelement - 处理点击离开事件

javascript - 将 JSON 数据复制到数组中

javascript - Marker 的 Z-index 高于 Infobox

javascript - capybara 与 :js => true causes tests to fail

带有表格而不是文本的 Javascript 弹出窗口(leafletjs 示例)

jquery - 当 jQuery 处理程序中抛出异常时,调用堆栈会丢失

javascript - Lightbox.options 不是函数 - 灯箱插件

javascript - 显示文本时丢失换行符

jquery - 事件处理委托(delegate)或直接