如何将活动类添加到导航菜单基于每个页面中的URL [英] How to Add Active Class to a Navigation Menu Based on URL in each page

问题描述

我在我的网站顶部有一个导航菜单。李的内容很多页面都有不同的网址。如何将活动类添加到导航菜单基于每个页面中显示具有特定颜色的URL？

 < ul> ; 
< li class =red>< a href =home> HOme< / a>< / li> 
< li>< a href =gallery>图片库< / a>< / li> 
< li>< a href =about> about< / a>< / li> 
< li>< a href =contact>联络人< / a>< / li> 
< / ul> 
  

解决方案

这段代码很有用。
$ b

HTML

 < ul id =menuList> 
< li>< a href =home>主页< / a>< / li> 
< li>< a href =gallery>图片库< / a>< / li> 
< li>< a href =about> about< / a>< / li> 
< li>< a href =contact>联络人< / a>< / li> 
< / ul> 
  

JS

  $（'＃menuList li'）。click（function（e）{
 e.preventDefault（）; //在主代码中删除它
 $（'＃menuList li'） .removeClass（active）; 
 $（this）.addClass（active）; 
}）; 
  

CSS

  .active {
 background-color：green; 
} 
  

工作示例

i have a navigation menu on top of my website .that li's content many pages with different urls. How to Add Active Class to a Navigation Menu Based on URL that in each page display it with a specific color?

<ul>
<li class="red"><a href="home">HOme</a></li>
<li><a href="gallery">gallery</a></li>
<li><a href="about">about</a></li>
<li><a href="contact">contact</a></li>
</ul>

解决方案

This snippet will be useful

HTML

<ul id="menuList">
<li><a href="home">Home</a></li>
<li><a href="gallery">gallery</a></li>
<li><a href="about">about</a></li>
<li><a href="contact">contact</a></li>
</ul>

JS

$('#menuList li').click(function(e){
 e.preventDefault(); //Remove this in your main code
    $('#menuList li').removeClass("active");
    $(this).addClass("active");
});

CSS

.active{
    background-color:green;
}

WORKING EXAMPLE

这篇关于如何将活动类添加到导航菜单基于每个页面中的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！