在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>
谢谢!
答
你会想要得到的URL路径:
window.location.pathname
我会建议你在一个JS文件做到这一点,而不是内嵌HTML。实施(的jsfiddle不拯救出于某种原因):
http://codepen.io/anon/pen/VvEeMY
确保取消注释注释位置线,使其能工作在您的网页:
var location = window.location.pathname;
注意,我会强烈建议不要使用像onClick这样的属性来处理DOM事件......但要回答我写过上面纯JS代码的问题。
编辑:使用位置路径名要求您使用在您的域后面开始的完整路径,但由于您的实现已经在选择>选项值中这样做了,所以我已经*地用location.pathname来简化它。
我会创建两个类,'active'和'inactive',并将活动类分配给当前显示的页面。 – Max
对不起,我没有指定!这是一个WordPress的侧边栏文本小部件,所以它不会分别编码在每个页面上。我想可能需要javascript来检测它在哪个页面上? – ramitaste