如何根据活动url更改导航栏中的图像

How do I change the image in a navbar based on what the active url is?

本文关键字：导航 图像 何根 活动 url      更新时间：2023-09-26

我要做的是在活动url为index.html时切换#navbar-image-id2games。我尝试用javascript这样做，但它似乎不工作。

HTML: 

<div class="navbar-item" id="navbar-item-ID2Games">
                            <a href="index.html" id="index-url">
                                <div class="navbar-image" id="navbar-image-unhovered">
                                </div>
                                <div class="navbar-image" id="navbar-image-id2games">
                                </div>
                                <br>
                                <div class="navbar-text">
                                    ID2 Games
                                </div>
                            </a>
    </div>
Javascript: 

$('#index-url').active(function() {
                  $('#navbar-image-id2games').toggle();
                  $('#navbar-image-unhovered').hide();
});

JSFiddle: https://jsfiddle.net/zxsmuaae/

您可以检查用户是否在index.html执行:

if (window.location.href.match(/index'.html/)) {
    // toggle
}

您可以使用if语句检查url，然后将可见性设置为隐藏，如果它在某个页面上。

var navimg = document.getElementById("navbar-image-id2games");
if(window.location.href === "http://example/index.html"){
    navimg.style.visibility = "hidden";
}

如果你想让它反转，只有当它不在index.html上时才隐藏，你可以用!==代替===

相关文章：