在具有單個HTML文件的兩個圖像之間切換

我有兩個網頁（我的根URL（/）和firstpage（/ firstpage））共有的頂部導航欄。在頂部的導航欄中有2個圖像，我想根據用戶所在的頁面在這些圖像之間切換。代碼如下：在具有單個HTML文件的兩個圖像之間切換

<img class="dark" src="/images/icons/IMAGE_home.png"> 
<img class="light" src="/images/icons/IMAGE1_page2.png">

當用戶在主頁上，他應該看到的第一個圖像和第二個應該被隱藏。當用戶在第二頁上時，他應該看到第二個圖像，並且應該隱藏第一個圖像。

任何css/angular/javascript技巧來完成這個？

在此先感謝。

來源

2017-02-17 Anuvrat Tiku

首頁body元素，A級，加上CSS設置'display'財產？ – nnnnnn

通常情況下，使用後端腳本就可以完成類似的工作，但對於JavaScript和CSS來說，這當然是可行的。

首先，設置既圖像默認爲隱藏：

.light, .dark { 
    display: none; 
}

其次，你需要通過檢查window.location從URL得到網頁名稱：

var path = window.location.pathname; 
var page = path.split("/").pop();

然後你將需要檢查當前頁面的狀態：

if (page == 'firstpage') { 
    document.getElementsByClassName("light")[0].style.display = 'block'; 
} 
else { 
    document.getElementsByClassName("dark")[0].style.display = 'block'; 
}

在上例中，/firstpage將有IMAGE1_page2.png，而每隔一頁將有IMAGE_home.png。可以用if (page) {}檢查根（僅僅是一個尾部的斜線）。

希望這會有所幫助！ :)使用jQuery

來源

2017-02-17 01:53:34

：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

JS：

$(document).ready(function() { 
    if (location.pathname == "/firstpage") { 
     $(".light").hide(); 
     $(".dark").show(); 
    } else { 
     $(".dark").hide(); 
     $(".light").show(); 
    } 
});

來源

2017-02-17 01:54:58 Sman

/firstpage將顯示「IMAGE1_page2.png」，而所有其他頁面將恢復到其他圖像。 – Sman

在具有單個HTML文件的兩個圖像之間切換

回答

相關問題