Highlight Link based on Query string using Jquery
I have a menu in the sidebar in a dynamic aspx page. I wan开发者_开发问答t to highlight the current link based on the query string value.
<div id="verticalmenu">
<ul>
<li><a href="services.aspx?pageid=11">Medical Transcription</a></li>
<li><a href="services.aspx?pageid=12">Business Transcription</a></li>
<li><a href="services.aspx?pageid=13">Legal Transcription</a></li>
<li><a href="services.aspx?pageid=14">Insurance Transcription</a></li>
<li><a href="services.aspx?pageid=15">Data Entry & Processing</a></li>
<li><a href="services.aspx?pageid=16">Software Development</a></li>
<li> <a href="services.aspx?pageid=25">Typesetting Services</a></li>
</ul>
</div>
With jQuery, it could look something like this:
$('#verticalmenu a').each(function (){
var linktext = $(this).attr('href');
if (linktext.search(window.location.search.substring(1)) > -1){
$(this).addClass('current');
}
});
Use window.location.search.substring(1)
to take the last part of the url, and check it against the href
attribute of your links using the search
method for javascript-strings. Then add a classname for the styling purpose. I used current
for example.
It might need some tweaking, but this is the way to go. However, I would strongly recommend to do this link-recognition serverside. This is a workaround I'm not too proud of.
精彩评论