如何根據有效網址更改導航欄中的圖像？

Question

我想做的是在活動網址為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/

Answer 1

您可以通過執行以下操作來檢查用戶是否在index.html ：

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

Answer 2

您可以使用if語句檢查url，然后將可見性設置為隱藏（如果它在特定頁面上）。

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

如果要使其反向（僅當它不在index.html上時才隱藏），可以將===替換為!== 。