使用:not选择器

Use of the :not selector

本文关键字：选择器 not 使用      更新时间：2023-09-26

我有一个不同版块的网站。我让jQuery在这些部分之间滑动。但现在我有一个链接在一个部分，指向另一个部分。

HTML：

    <div class="section" id="one">
        <div class="row">
            <p>This is some text</p>
        </div>
        <div class="row">
            <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
        </div>
    </div>
    <div class="section" id="tow">
        <div class="row">
            <p>This is some text</p>
        </div>
        <div class="row">
            <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
        </div>
    </div>
    <div class="section" id="ordernow">
        <div class="row">
            <p>This is some text</p>
        </div>
        <div class="row">
            <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
        </div>
    </div>
    <div class="section" id="four">
        <div class="row">
            <p>This is some text</p>
        </div>
        <div class="row">
            <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>
        </div>
    </div>

jQuery:

// onclick on an object with class "section" scroll to this object
$('div.section').click(function() {
    $.scrollTo($(this), 800);
});
function scrollOrderNow(){
    $('html,body').animate({
        scrollTop: $("#ordernow").offset().top
    }, 1000);
}

问题是，如果我点击链接scrollOrderNow()，页面会滑到订单页面，然后滑回该部分，因为链接在该部分中。

你能帮我弄清楚吗？

谢谢！

您可以使用单击处理程序，并根据在节内单击的元素来确定要做什么。为此，最好通过给可点击元素一个类来区分它：

<div class="section" id="four">
  <div class="row">
      <p>This is some text</p>
  </div>
  <div class="row">
      <a href="#"><img src="button" class="scroll-to-order"/></a>
  </div>
</div>

点击处理程序代码：

$('div.section').on('click', function(evt) {
    var $target = $(evt.target);
    if ($target.is('.scroll-to-order')) {
        // the image itself was clicked, so scroll to ordernow
        $('html,body').animate({
            scrollTop: $("#ordernow").offset().top
        }, 1000);
    } else {
        // something else inside the section was clicked, scroll to section
        $.scrollTo($(this), 800);
    }
});

您需要将return false放入scrollOrderNow()函数中。

function scrollOrderNow(){
    $('html,body').animate({
        scrollTop: $("#ordernow").offset().top
    }, 1000);
    return false;
}

这样，你的链接就不会做出反应，散列也不会被附加到URL上，留下页面所在的位置。

相关文章：