在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中突出显示当前选中的下拉表单选项选项

回答

相关问题