Javascript 将类添加到div用户刚刚滚动到

我想向用户滚动到的div添加一个类，但是由于某种原因，无论我写什么，div都不会打开

我正在使用location.hash==“”检查url中是否存在某个字符串，该字符串是否正确，然后滚动到该div。一旦滚动到该div，我希望删除隐藏类并添加显示类（将显示该div），但我无法使其工作

这可能真的很简单，但我无法达到正确的效果

这是我的密码：

if(window.location.hash == 'data-sheets') {
    $.scrollTo('.Data-Sheets', 0, { offset:-1 } , { easing:'elasout' }); 
    $(".Data-Sheets .expand2").removeClass("hide");
    $(".Data-Sheets .expand2").addClass("show");
}

纯CSS解决方案 根据您想要实现的目标，您可以使用CSS的

某些URI引用资源中的位置。这种URI以“数字符号”（#）结尾，后跟锚标识符（称为片段标识符）

带有片段标识符的URI链接到文档中的某个元素，称为目标元素。例如，这里有一个URI，指向HTML文档中名为section_2的锚：

http://example.com/html/top.html#section_2

目标元素可以用：target伪类表示。如果文档的URI没有片段标识符，则文档没有目标元素

例如：

。数据表。扩展2{
显示：无；
}
.数据表.扩展2：目标{
显示：块；
}

下面是一个正在运行的JSBin演示，使用以下标记：

<div class="Data-Sheets">
  <p class="expand2" id="foo">I should be visible when #foo is added to the URL.</p>
  <p class="expand2" id="bar">I should be visible when #bar is added to the URL.</p>
</div>

将#foo添加到URL时，我应该可见
将#bar添加到URL时，我应该可见

没有指定目标：

指定了

#foo

：

指定了

#条

：

---

如果浏览器处理

：target

伪类，在第一个示例中，两个

p

元素都应该隐藏；在第二个视图中，您应该看到第一个

p

元素应该可见，但第二个元素不可见；在第三个元素中，第二个

p

元素应该可见，但第一个元素不可见。

您可以这样做：

function scrollToDiv(id) {
    var id = $("#"+id);
    if( id.position().top + $(window).height() - $(window).scrollTop() > 0 )
        id.addClass("focus");
    else
        id.removeClass("focus");     
}

用法： 小提琴：

---

这里有一份工作供参考。

为任何试图实现与我相同目标的人发布此文章

我没有意识到我在if语句中丢失了hash，通过添加它解决了我的问题，并且正确地添加/删除了类

这是我的最终代码：

if(window.location.hash == '#data-sheets') {
    $.scrollTo('.Data-Sheets', 0, { offset:-1 } , { easing:'elasout' });
    $('.Data-Sheets .expand2').removeClass('hide');
    $('.Data-Sheets .expand2').addClass('show');    
return false;
} 

我还添加了这个函数来检查散列是否已经更改，因为我需要在不同的链接之间切换，默认情况下它“隐藏”所有div，因为我不想显示它们，然后删除“show”类，然后它滚动到正确的点

function locationHashChanged() {

   if(location.hash == '#data-sheets') {
       $.scrollTo('.Data-Sheets', 0, { offset:-1 } , { easing:'elasout' });
       $('.expand2.show').addClass('hide');
       $('.expand2.show').removeClass('show');
       $('.Data-Sheets .expand2').addClass('show');
   }
}

---

根据类的组成，您可以调用

.hide（）

/

.show（）

而不是应用类（与Q不直接相关）。hide只是隐藏div，而.show将显示div。默认情况下，我已应用了.hide，因为我不想在加载页面时显示它们。当用户滚动到某个div时，应该会显示它们。我尝试了您的解决方案@JamesDonnelly，但没有成功。Sorry我按照您的建议添加了CSS，我确保我的div具有正确的class/ID，但当我滚动到该div时，它没有打开。你的建议是好的，我看到你的链接，它确实工作。也许我的代码中缺少了一些东西。不过我更喜欢使用JS方法。

function locationHashChanged() {

   if(location.hash == '#data-sheets') {
       $.scrollTo('.Data-Sheets', 0, { offset:-1 } , { easing:'elasout' });
       $('.expand2.show').addClass('hide');
       $('.expand2.show').removeClass('show');
       $('.Data-Sheets .expand2').addClass('show');
   }
}