子雨
2016-06-23 09:32
采纳率: 100%
浏览 1.3k
已采纳

js如果实现当前页面中已筛选参数高亮

当前网址,例:http://www.shadoweb.cn/anli/?type=list&tag=asp&webok=2014
页面中筛选项列表:

 <div class="sl_list" id="sl_list">
<div class="selector">
<span>开发语言:</span>
<ul class="valueList">
<li><a href="/anli/?type=list&webok=2014">全部</a></li><li><a href="/anli/?type=list&webok=2014&tag=asp">ASP</a></li><li><a href="/anli/?type=list&webok=2014&tag=php">PHP</a></li><li><a href="/anli/?type=list&webok=2014&tag=jsp">JSP</a></li>
</ul>
</div>
<div class="selector">
<span>项目日期:</span>
<ul class="valueList">
<li><a href="/anli/?type=list&tag=asp">全部</a></li><li><a href="/anli/?type=list&tag=asp&webok=2016">2016</a></li><li><a href="/anli/?type=list&tag=asp&webok=2015">2015</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014">2014</a></li>
</ul>
</div>
<div class="selector">
<span>网站类型:</span>
<ul class="valueList">
<li><a href="/anli/?type=list&tag=asp&webok=2014">全部</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014&webname=公司">公司</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014&webname=论坛">论坛</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014&webname=官网">官网</a></li><li><a href="/anli/?type=list&tag=asp&webok=2014&webname=企业">企业</a></li>
</ul>

</div>
</div>

如何通过js实现列表中的a标签高亮.
即当前链接中 ?type=list&tag=asp&webok=2014
a标签中链接参数相同的高亮(只含&tag=asp&webok=2014这两个参数
同时,还需要注意webname参数值的中文转码...

请大神小手抖一抖,不胜感激.

我在网上找了一个,只是针对一个链接的,修改后实现不了.

 <script type="text/javascript">  

var myNav = document.getElementById("sl_list").getElementsByTagName("a");   
for(var i=0;i<myNav.length;i++)   
{   
   var links = myNav[i].getAttribute("href");   
   var myURL = "\/anli\/" + window.location.search;    
   if(myURL.indexOf(links) != -1)   
   {   
      myNav[i].className="sl_on";   
    }   
}  
document.write(myURL);  
</script>  

我的思路是得到当前URL中的参数,再匹配列表中的a标签中的URL的参数,参数和值完全相等的情况下,添加class.

不会写JS,麻烦了.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 子雨 2016-07-04 09:25
    已采纳
     <script type="text/javascript">
    function GetQueryString(name,url)
    {
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = url.substr(1).match(reg);
         if(r!=null)return  r[2]; return null;
    }
    
    var myNav = document.getElementById("sl_list").getElementsByTagName("a");   
    for(var i=0;i<myNav.length;i++) 
    {   
       var links = myNav[i].getAttribute("href").substring("6");
       var myURL =window.location.search;
    //document.write(encodeURIComponent(GetQueryString("webname",links )));
    var a=GetQueryString("classid",links );
    var a1=GetQueryString("classid",myURL);
    var b=GetQueryString("webyuyan",links );
    var b1=GetQueryString("webyuyan",myURL);
    var c=GetQueryString("webok",links );
    var c1=GetQueryString("webok",myURL)
    var d=GetQueryString("webname",links );
    var d1=GetQueryString("webname",myURL);
    var d2=encodeURIComponent(GetQueryString("webname",links ));
    if(d!=null) { d=d2;}else{ d=d;}
    if(a===a1 && b===b1 && c===c1 && d===d1 ) {myNav[i].className="sl_on"; }   
    } 
    //document.write(GetQueryString("webname",myURL)); 
    </script> 
    
    点赞 评论
  •  <style>
        .sl_on{color:#f00;font-weight:bold}
    </style>
    <div class="sl_list" id="sl_list">
        <div class="selector">
            <span>开发语言:</span>
            <ul class="valueList">
                <li><a href="/anli/?type=list&webok=2014">全部</a></li>
                <li><a href="/anli/?type=list&webok=2014&tag=asp">ASP</a></li>
                <li><a href="/anli/?type=list&webok=2014&tag=php">PHP</a></li>
                <li><a href="/anli/?type=list&webok=2014&tag=jsp">JSP</a></li>
            </ul>
        </div>
        <div class="selector">
            <span>项目日期:</span>
            <ul class="valueList">
                <li><a href="/anli/?type=list&tag=asp">全部</a></li>
                <li><a href="/anli/?type=list&tag=asp&webok=2016">2016</a></li>
                <li><a href="/anli/?type=list&tag=asp&webok=2015">2015</a></li>
                <li><a href="/anli/?type=list&tag=asp&webok=2014">2014</a></li>
            </ul>
        </div>
        <div class="selector">
            <span>网站类型:</span>
            <ul class="valueList">
                <li><a href="/anli/?type=list&tag=asp&webok=2014">全部</a></li>
                <li><a href="/anli/?type=list&tag=asp&webok=2014&webname=公司">公司</a></li>
                <li><a href="/anli/?type=list&tag=asp&webok=2014&webname=论坛">论坛</a></li>
                <li><a href="/anli/?type=list&tag=asp&webok=2014&webname=官网">官网</a></li>
                <li><a href="/anli/?type=list&tag=asp&webok=2014&webname=企业">企业</a></li>
            </ul>
    
        </div>
    </div>
    <script type="text/javascript">
    
        var myNav = document.getElementById("sl_list").getElementsByTagName("a");
        var myURL =  decodeURIComponent(window.location.search);
        for (var i = 0; i < myNav.length; i++) {
            var links = myNav[i].search;
            if (links==myURL) {
                myNav[i].className = "sl_on";
            }
        }
        document.write(myURL);
    </script>  
    
    点赞 评论

相关推荐 更多相似问题