使用Jquery突出显示基于查询字符串的链接

时间:2011-08-08 11:48:25

标签: jquery menu highlight

我在动态aspx页面的侧边栏中有一个菜单。 我想根据查询字符串值突出显示当前链接。

<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>

1 个答案:

答案 0 :(得分:3)

使用jQuery,它看起来像这样:

$('#verticalmenu a').each(function (){
    var linktext = $(this).attr('href');
    if (linktext.search(window.location.search.substring(1)) > -1){
       $(this).addClass('current');
    }
});

使用window.location.search.substring(1)获取网址的最后一部分,并使用href javascript-strings方法检查链接的search属性。然后为样式目的添加一个类名。我以current为例。

可能需要一些调整,但这是要走的路。但是,我强烈建议使用链接识别服务器端。这是一个我不太自豪的解决方法。