在html中突出顯示當前選中的下拉表單選項選項

如何根據用戶當前所在的頁面突出顯示選項？在html中突出顯示當前選中的下拉表單選項選項

E.g.如果在「牀單」頁面上選擇「牀單」選項。

這是一個WordPress的側邊欄文本小部件，所以它沒有單獨編碼在每一頁上。我想可能需要javascript來檢測它在哪個頁面上？

<form> 
<select onChange="location=this.options[this.selectedIndex].value;"> 
<option value="#">Select a Category</option> 
<option value="https://www.furnishare.it/shop/">Shop All</option> 
<option value="/product-category/beds/">Beds</option> 
<option value="/product-category/chairs/">Chairs</option> 
<option value="/product-category/decor/">Decor</option> 
<option value="/product-category/dressers/">Dressers</option> 
<option value="/product-category/sofas/">Sofas</option> 
<option value="/product-category/storage/">Storage</option> 
<option value="/product-category/tables/">Tables</option> 
</select> 
</form>

謝謝！

來源

2015-11-06 ramitaste

我會創建兩個類，'active'和'inactive'，並將活動類分配給當前顯示的頁面。 – Max

對不起，我沒有指定！這是一個WordPress的側邊欄文本小部件，所以它不會分別編碼在每個頁面上。我想可能需要javascript來檢測它在哪個頁面上？ – ramitaste

你會想要得到的URL路徑：

window.location.pathname

我會建議你在一個JS文件做到這一點，而不是內嵌HTML。實施（的jsfiddle不拯救出於某種原因）：

http://codepen.io/anon/pen/VvEeMY

確保取消註釋註釋位置線，使其能工作在您的網頁：

var location = window.location.pathname;

注意，我會強烈建議不要使用像onClick這樣的屬性來處理DOM事件......但要回答我寫過上面純JS代碼的問題。

編輯：使用位置路徑名要求您使用在您的域後面開始的完整路徑，但由於您的實現已經在選擇>選項值中這樣做了，所以我已經自由地用location.pathname來簡化它。

來源

2015-11-06 23:45:04

在html中突出顯示當前選中的下拉表單選項選項

回答

相關問題