Question

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

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

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

Answer 1

DIV 必须有 ID ，你的图标在里面。 像这样：

<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 - ”的id前缀更改菜单中div的不透明度。

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

定义您正在查看的具有ID的div

2 个答案: