html - 定义您正在查看的带有 ID 的 div

Question

我正在做一个单页的网站设计，但我如何定义我在里面的 div？

例如...我有一个带有图标的导航菜单，当我在<div id="contact"></div>导航菜单中的联系人图标内时，将不透明度从 1 更改为 0.5

我怎么做？希望你明白我的意思。

Answer 1

必须有一个ID与您的图标所在的DIV相关联。像这样：

<div id="contact" class="class-div">
  <img id="img1" class="class-img" src="some-source" />
</div>

因此，基本上，当您将鼠标悬停在该特定DIV上时，您调用 DIV 的ID并更改样式。像这样：

#contact {
  opacity: 0.5;
}

如果您想在将鼠标悬停在图像上时选择父 ID，则需要使用某种 JavaScript 代码或简单的导入 jQuery 插件并使用 jQuery 选择器更改样式。像这样：

$('#img1').hover(function() {
        $(this).parents('div#contact').css({ 'opacity': '0.5'  });
    });

Answer 2

我想我知道您的意思，我为您制作了一个 jsFiddle，您可以在其中看到我是如何做到的。我使用 jQuery 来检查您向下滚动了多少，并将其与 div 到页面顶部的距离进行了比较。

http://jsfiddle.net/Denocle/QBf59/2/

假设您的 HTML 如下所示：

<div id="menu">
    <div id="menu-hello"><a href="#hello">Hello</a></div>
    <div id="menu-about"><a href="#about">About</a></div>
    <div id="menu-contact"><a href="#contact">Contact</a></div>
</div>

<div class="big" id="hello">
    <h1>Hello</h1>
    Text
</div>

<div class="big" id="about">
    <h1>About</h1>
    Text  
</div>

<div class="big" id="contact">
    <h1>Contact</h1>
    Text
</div>

然后我们有一些像这样的jQuery：

$(window).scroll(function() {
    $('.big').each( function(i){
        var top_of_object = $(this).position().top;
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var top_of_window = $(window).scrollTop();
        var id = $(this).attr('id');

        if (top_of_window >= top_of_object && top_of_window <= bottom_of_object) {
            $('#menu-'+id).css({'opacity':'0.5'});
        } else {
            $('#menu-'+id).css({'opacity':'1'});
        }
    }); 
});

这将确定浏览器窗口的顶部是否在具有“big”类的 div 之一内，然后更改菜单中具有“menu-”前缀的 div 的不透明度。

我重用了这个线程的一些代码： https ://stackoverflow.com/a/9099127/1713635