0

I have a menu including the following li

<div class="menu">
    <ul>
       <li><a href="index.jsp" class="active">Home</a></li>
       <li><a href="listnews.jsp">News</a></li>
       <li><a href="abc.jsp">ABC</li>
    </ul>
</div>

In this code, home page is actived. But want to enable active status when I click on my News page. How Can I do? Thanks for watching.

leebongee
  • 93
  • 1
  • 8

5 Answers5

2

Please add Js like:

jQuery(document).ready(function () {
  jQuery('.menu li a').click(function () {
      //removing the previous selected menu state
      jQuery('.menu li').find('a.active').removeClass('active');
      //adding the state for this parent menu
      jQuery(this).addClass('active');

  });
});
a.active {
 color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
    <ul>
       <li><a href="index.jsp" class="active">Home</a></li>
       <li><a href="listnews.jsp">News</a></li>
       <li><a href="abc.jsp">ABC</li>
    </ul>
</div>
Joykal Infotech
  • 1,816
  • 3
  • 8
  • 17
2

You can use jQuery to do so, use the script below:

$(document).ready(function () {
  $('.menu ul li a').click(function () {
     // This will remove active class from other links
    $('.menu ul li').find('a.active').removeClass('active');    
    // This will add active class to the link clicked 
      $(this).addClass('active');
   });
});
Ifrah
  • 143
  • 1
  • 6
  • @JoykalInfotech I have added the code I use for the condition like this, this may be same but surely not copied. – Ifrah Apr 10 '19 at 10:07
1

With some JS or JQuery , Add a click event on your links and call a method


<div class="menu">
    <ul>
       <li><a href="index.jsp" click="MyMethod">Home</a></li>
       <li><a href="listnews.jsp" click="MyMethod">News</a></li>
       <li><a href="abc.jsp" click="MyMethod">ABC</li>
    </ul>
</div>

and in Jquery(or JS) : perform this : 


YourLinkClicked.removeClass('active');
YourLinkClicked.addClass('active');

Or just look at this link : http://jsfiddle.net/designaroni/E53t9/

Eros Guil
  • 53
  • 9
  • This is jQuery, if you wish to add a class with Javascript you should use `classList` - [read more link](https://www.w3schools.com/jsref/prop_element_classlist.asp) – Marc Hjorth Apr 10 '19 at 08:09
1

Here is code using pure javascript

화이팅!!

function change(elem){
  var list = document.querySelectorAll(".menu ul li a");

  for (var i = 0; i < list.length; ++i) {
    list[i].classList.remove('active');
  }
  elem.classList.add('active');
}
.active{
color:red;
}
<div class="menu">
    <ul>
       <li><a href="#" class="active" onclick="change(this)">Home</a></li>
       <li><a href="#" onclick="change(this)">News</a></li>
       <li><a href="#" onclick="change(this)">ABC</a></li>
    </ul>
</div>
לבני מלכה
  • 15,403
  • 2
  • 20
  • 41
-1

Here is some basic function i use for my current MVC project.

Add this to the master page or shared pages, the js need to run each time the site reload.

and you need to use jquery

$(document).ready(function () {
  // the current page url eg /index.jsp
  var href = window.location.href.toLowerCase();
  
  $(".menu").find("a").each(function () {
    // find the current li that match the current Url
    if (href.indexOf($(this).attr("href").toLowerCase()) != -1)
           $(this).addClass("active"); // set the current li to active
     })
 })
.acive{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
    <ul>
       <li><a href="index.jsp" class="active">Home</a></li>
       <li><a href="listnews.jsp">News</a></li>
       <li><a href="abc.jsp">ABC</li>
    </ul>
</div>
Alen.Toma
  • 4,571
  • 2
  • 12
  • 27