在下拉菜单中必须突出显示所选选项

Question

我的代码中有一个下拉列表。我已经在线尝试了所有解决方案以突出显示所选的选项但由于某种原因，它似乎无法正常工作。

                  <asp:linkbutton ID="ReportsLink" type="button" OnClientClick="return false;"  class="dropbtn"  runat ="server"  CausesValidation="false" cssclass="MenuItem">
            <img alt="WorkFlow"   class="MenuIcon" src="Assets/img/Reports.png" />
            <asp:label  ID="Label1" style="color:white;" runat="server" Text="Reports" />
          </asp:linkbutton>

         <ul class="dropdown-content" id="myDIV">

   <li><a href="xyz.aspx"class="color active">xyz</a></li>
  <%-- <li><a href="abc.aspx"class="color">abc</a></li> --%>
    <li><a href="pqr.aspx"class="color">pqr</a></li> 
  </ul>
</div> ```

this is the css!!

```.active{
    background-color: #2864DC;
                           color:white;
}```


 ``` var url = window.location;
        $('.dropdown-content a').filter(function() {
            return this.href == url;
    }).parent().addClass('active'); ```

i just want the li to be highlighted!

Answer 1

您正在使用window.location，它将返回一个Location对象。

为了进行比较，您应该使用var url = window.location.href

Answer 2

您可以替换此CSS

a.color.active {
    background-color: #2864DC;
    color:white;
}

或

a.active {
    background-color: #2864DC;
    color:white;
}

我认为这非常有帮助。