Question

当我找到它的相应部分时，我想激活菜单项。我从之前的SO问题中受到启发：Change Active Menu Item on Page Scroll?。

但不同之处在于，在我的菜单中，我在每个菜单项上都有一个小图片，仅在我将鼠标悬停在菜单项上时显示，并且在不显示时隐藏。

HTML

<nav>
        <ul id="pics">
          <a href="#def"><li id="text-what"><img src="images/what.png" id="pic-what" class="vishid"><p>item1</p></li></a>
          <a href="#program"><li id="text-training"><img src="images/training.png" id="pic-training" class="vishid"><p>item2</p></li></a>
          <a href="#testi"><li id="text-testi"><img src="images/trait.png" id="pic-testi" class="vishid"><p>item3</p></li></a>
          <a href="#contact"><li id="text-contact"><img src="images/contact.gif" id="pic-contact" class="vishid"><p>item4</p></li></a>
        </ul>
    </nav>

CSS

.vishid{
    visibility: hidden;
}

.visvis{
    visibility:visible;
}

JAVASCRIPT（在悬停物品时显示和隐藏图像）

$(document).ready(function(){
$("#text-what").hover(function(){
    $("#pic-what").addClass('visvis');
},function(){
    $("#pic-what").removeClass('visvis');
});

$("#text-training").hover(function(){
    $("#pic-training").addClass('visvis');
},function(){
    $("#pic-training").removeClass('visvis');
});

$("#text-testi").hover(function(){
    $("#pic-testi").addClass('visvis');
},function(){
    $("#pic-testi").removeClass('visvis');
});

$("#text-contact").hover(function(){
    $("#pic-contact").addClass('visvis');
},function(){
    $("#pic-contact").removeClass('visvis');
});
});

我想在我对应的部分时显示图像。我怎么能用javascript做到这一点？

Answer 1

这里有很多事情要发生。从技术上讲，您的HTML应该得到纠正。 href不应该封装LI的。相反，您的href应该设置为块 - 宽度和高度100％ - 在LI内。我们也将.vishid的类移到父LI。这样，如果你希望它在将来影响其他任何东西 - 除了图像 - 之外，它将很容易添加。所以这看起来像：

<nav>
    <ul id="pics">
        <li id="text-what" class="vishid"><a href="#def"><img src="images/what.png" id="pic-what"><p>item1</p><</a>/li>
        <li id="text-training" class="vishid"><a href="#program"><img src="images/training.png" id="pic-training"><p>item2</p></a></li>
        <li id="text-testi" class="vishid"><a href="#testi"><img src="images/trait.png" id="pic-testi"><p>item3</p></a></li>
        <li id="text-contact" class="vishid"><a href="#contact"><img src="images/contact.gif" id="pic-contact"><p>item4</p></a></li><
    </ul>
</nav>

然后你需要调整你的CSS来纠正“非阻塞”级别的反射。

#pics li a {
    display: block;
    width: 100%;
    height: 100%;
}

.vishid img {
    visibility: hidden;
}

.visvis img {
    visibility: visible;
}

最后，我将假设您在HTML中使用“文章”作为章节。不一定是，但这就是我的例子。

var clickScroll = false,
    triggerHighlight = 80; // distance from the top to trigger action

$(window).scroll(function () {

    var y = $(this).scrollTop(),
        yCatch = y + triggerHighlight;

    // Let's wrap in a variable check. Set this to tru is clicking on navigation
    // false if simply scrolling
    if (!clickScroll) {
        $('article').each(function (i) {
            var whichArticle = $(this).attr('id');

            if ($(this).position().top < yCatch) {
                var currentArticle = "#" + whichArticle;
                adjustSubNav(currentArticle);
            }
        });
    }

});

function adjustSubNav(l) {
    $('#pics a').each(function (i) {
        if ($(this).attr('href') == l) {    // Add active class to the corresponding menu item
            $(this).parent('li').removeClass('vishid').addClass('visvis');
        } else {
            $(this).parent('li').removeClass('visvis').addClass('vishid');
        }
    });
}

更改页面滚动上的活动菜单项？

1 个答案: