Heim > Web-Frontend > js-Tutorial > Hauptteil

用js查找法实现当前栏目的高亮显示的代码_javascript技巧

WBOY
Freigeben: 2016-05-16 19:07:41
Original
1435 Leute haben es durchsucht

当前栏目高亮显示
       JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回
其它,并与返回其它结果的那个字符串所在元素定义一个class.

HTML

复制代码 代码如下:

JS
复制代码 代码如下:

var myNav = document.getElementById("nav").getElementsByTagName("a");  
for(var i=0;i{  
   var links = myNav[i].getAttribute("href");  
    //alert(links)  
   //alert(myNav[i]);  
   var myURL = document.location.href;   
   if(myURL.indexOf(links) != -1)  
   {  
      myNav[i].className="d";  
    }  


当前栏目高亮显示不知道你明白了没有?没有的话,我说详细点。首先,你点击一个连接,比如: 
  • href="http://www.jb51.net/html/list/index_127.htm" title="资讯中心">资讯中心
  •  
    点击之后浏览器发生了什么变化呢?是的,就是地址栏变成了:
    http://www.jb51.net/html/list/index_127.htm
    使用 document.location.href; 
    取得的就是这个地址(http://www.jb51.net/html/list/index_127.htm)。
    然后我们再遍历当前网页上的所有连接,取得每个连接href的值。遍历的代码: 
    复制代码 代码如下:

    var myNav = document.getElementById("nav").getElementsByTagName("a");  
    for(var i=0;i{  
       var links = myNav[i].getAttribute("href");  


          使用indexOf函数来比较是否页面的所有连接中,有关键字在http://www.jb51.net/html/list/index_127.htm中出现。若有的话,就表
    明是当前连接,那么就修改当前连接的样式。这就实现了当前栏目高亮显示,当前栏目高亮显示是一个很实用的技巧,在增加用户体验方面尤
    其有好处。但在实用过程中,可能需要注意一些细节问题,比如搜索吧的博客是用外链的方式来连接的,那么在处理的时候,点了这个外链的
    时候是否高亮呢?这里也只是我觉得当前栏目高亮显示时可能出现的问题稍微说一下,说不定你已经有解决方法了。
    Verwandte Etiketten:
    js
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage