2

I am using a simple top css navbar(just a css and html, without bootstrap/other framework) and i would like to change the active page. So when i go to the home page, the button color in navbar changes into red/whatever, likewise when i go to the other page...

here the code:

body {
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  float: left;
  width: 25%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 18px;
}

li a:hover {
  background-color: #111;
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Division</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">MChoice's</a></li>
</ul>

do you have an idea? it's ok to add javascript

Thanks a lot!

mupinnn
  • 112
  • 4
  • 12
  • What kind of server are you using? It is much easier marking one of the nav-entries with a css-class on the server-side if possible. – kalsowerus Apr 20 '17 at 14:04
  • Possible duplicate of [Add ".active" class to the current page's link in a menu using jQuery or PHP](http://stackoverflow.com/questions/13349046/add-active-class-to-the-current-pages-link-in-a-menu-using-jquery-or-php) – mikeg542 Apr 20 '17 at 14:04
  • How do you add the nav to each page? is it part of a template or is each page programmed separately? If it's a template, is it static html or does it change through a server-side language? – Pete Apr 20 '17 at 14:06
  • is your app single page application? when you click the menu you redirect to another url or you stay same page? – Dalin Huang Apr 20 '17 at 14:08
  • Its just a homework from my school, i will not upload it to server – mupinnn Apr 20 '17 at 16:00
  • multi page application, so the "active" navbar is just an indicator if you visited the page – mupinnn Apr 20 '17 at 16:02
  • So these are static pages not being built with a server side language or some other template engine? If you're copy-n-pasting your navigation into each page's file then you just need to add `class="active"` to the appropriate navigation item. – hungerstar Apr 20 '17 at 17:13

9 Answers9

1

What I did here is when $(document).ready(function() {..} get the path using var url = window.location.pathname; so you know which link the user coming from therefore you know which menu item they clicked.

Then $('ul li a').each(function() {...} will check each menu item, try to match the url path with the menu's href attributes, if a match found, make that menu item active (with css active class added), if not match remove the active class if any. That should do the trick.

(note: assume your app is not single page app)

for Single page app it is much easier, deactive all menu item then active the one you clicked.

$(document).ready(function() {
  //var url = window.location.pathname;
  var url = 'http://stacksnippets.net/js#division';
  console.log('url-->', url);

  $('ul li a').each(function() {
    var href = $(this).attr('href');
    if (!!url.match(href)) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });

});
body {
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  float: left;
  width: 25%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 18px;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#division">Division</a></li>
  <li><a href="#career">Career</a></li>
  <li><a href="#mchoices">MChoice's</a></li>
</ul>
Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
  • This would be for a single page application no? – hungerstar Apr 20 '17 at 14:13
  • @hungerstar yes, there is another way I will add later – Dalin Huang Apr 20 '17 at 14:14
  • I think you'd be better served using `window.location.pathname` or `window.location.hash`. `href` is a complete URL that might not match the value in an `href` attribute. – hungerstar Apr 20 '17 at 14:31
  • @da'geeks check my solution, using jQuery, you can do it dynamically. It get the url you coming from then match with the nav menu href, if a match found, active that item otherwise remove it – Dalin Huang Apr 20 '17 at 14:31
1

The simplest solution would be to add an active class to the link of the page you're on:

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Division</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">MChoice's</a></li>
</ul>

Then style those that class accordingly:

li a.active {
    background: #F00;
}

If you're using a CMS (Wordpress, etc), adding some sort of active class on the active link is usually done for you. If you're doing your own static HTML, you would have to do it manually.

pixleight
  • 188
  • 7
0

try below code for active menu 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('li a').on('click', function(){
      $('li a').removeClass('active');
      $(this).addClass('active');
    }); 
});
</script>

<style type="text/css">
body {
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  float: left;
  width: 25%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 18px;
}

li a:hover, li a.active {
  background-color: #111;
}

</style>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Division</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">MChoice's</a></li>
</ul>
Shital Marakana
  • 2,817
  • 1
  • 9
  • 12
  • All you did was add an active class to an element. You have not addressed how one would do this when navigating from page to page or section of a page to another section of a page in a SPA. – hungerstar Apr 20 '17 at 14:18
0

To change the color of active link in your navigation you need to do the following things:

  1. On click of navigation link add css class:
$('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
  1. Add CSS for active class
ul li a.active {
    background-color: #f4f4f4;
}
hungerstar
  • 21,206
  • 6
  • 50
  • 59
Jitesh Garude
  • 26
  • 5
0

HTML Part

 <div class="navbar">
    <div class="navbar-fixed-top">
       <div class="container" style="width: auto;">
          <div class="nav-collapse" id="nav-collapse">
             <ul class="nav" id="nav">
                 <li id="News"><a href="#News">News</a></li>
                 <li id="Contact"><a href="#Contact">Contact</a></li>
                 <li id="About"><a href="#About">About</a></li>
                 <li id="Division"><a href="#Division">Division</a></li>
                 <li id="Career"><a href="#Career">Career</a></li>
                 <li id="skill"><a href="#skill">Skill</a></li>
                 <li id="research"><a href="#research">Research</a></li>
                 <li id="MChoice"><a href="#MChoice">MChoice's</a></li>                     
             </ul>
          </div>
       </div>
    </div>
 </div>

JavaScript part

$(function() {
        $('#nav li a').click(function() {
           $('#nav li').removeClass();
           $($(this).attr('href')).addClass('active');
        });
     });

CSS Part

.navbar #nav > .active > a {
    color: yellow;
}

here is JSFiddle result

http://jsfiddle.net/Ag47D/775/

Sachith Wickramaarachchi
  • 5,546
  • 6
  • 39
  • 68
  • thanks before, but i dont allowed to use a bootstrap/other framework, if its just a css and html, what must i do? I get some answer in this forum, i will try it one by one. I just put some active class in css and make it more dynamic with javascript or what? – mupinnn Apr 20 '17 at 16:14
0

function redButtons() {

  $(".inclusive-buttons").on("click", "a", function() {
    $(".inclusive-buttons a").css("background", "#333");
    $(this).css("background", "red");
  })
  
}

var x = document.getElementsByTagName("li");
x.onclick = redButtons();
body {
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  float: left;
  width: 25%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 18px;
}

li a:hover {
  background-color: #111;
}
a:active { 
    background-color: red;
}
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<ul class="inclusive-buttons">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Division</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">MChoice's</a></li>
</ul>

https://jsfiddle.net/m5gm7x7e/2/

hungerstar
  • 21,206
  • 6
  • 50
  • 59
Neetigya
  • 121
  • 2
  • 10
  • Add/Remove a CSS class would be more flexible than directly applying inline CSS. – hungerstar Apr 20 '17 at 14:35
  • @hungerstar- ya sorry for giving wrong solution, I will correct it. – Neetigya Apr 20 '17 at 14:38
  • It's not that it's wrong, just less flexible. By using a CSS class you don't have to dig into the JS and possibly replace two color values as you have done. Instead you'd change a single value in the CSS if the color needed to be changed. – hungerstar Apr 20 '17 at 14:40
0

One possible way is to use the active selector in CSS. This selector highlights the active element you are using when its clicked. 

a:active { 
    background-color: yellow;
}

a:focus { 
    background-color: yellow;
}

You can use some JQuery to turn it on and off too. Try looking at this post here, I think you may have get your answer.

(Related to How to keep :active css style after clicking an element)

jQuery('button').click(function(){
   jQuery(this).toggleClass('active');
});
Community
  • 1
  • 1
Sourumeiji
  • 101
  • 4
  • 13
0

Here's a JSFiddle: https://jsfiddle.net/timhjellum/nw3n7eka/103/

This is a jQuery option which looks at the page URL (window.location) and specifically for a string which you define in the .indexOf(" add a unique string here ") and asks if that string is greater than -1, then locate the li element with the class you assigned to it, and add another class called active.

In the example I'm using "display" because that the URL for that iFrame that JSFiddle uses so hopefully that's not confusing.

Here's the navigation:

$(document).ready(function () {
     if(window.location.href.indexOf("home") > -1) {
         $(".home").addClass("active");
     }
     if(window.location.href.indexOf("display") > -1) {
         $(".news").addClass("active");
     }
     //make one for each nav element
});

The HTML needs to be modified like:

<ul>
  <li class="home"><a href="index">Home</a></li>
  <li class="news"><a href="display">News</a></li>
  <li class="contact"><a href="contact">Contact</a></li>
  <li class="about"><a href="about">About</a></li>
</ul>

And then a simple css addition:

li.active {
  background-color: white;
}
li.active a {
  color: black;
}

If you can't use jQuery, let me know but this is the easiest solution for you to implement and allow you to easily modify

Timber Hjellum
  • 330
  • 2
  • 7
-1

You could try having separate classes in your CSS file, like "ul-home," "ul-news," etc. and define different background colors for each, then simply set the class for your <ul> tag on each page to match the class you want. So:

.ul-home {
    background-color: red;
}
.ul-news {
    backrgound-color: yellow;
}

And then on your home page:

<ul class="ul-home>
    <li>Home</li>
    <li>News</li>
</ul>

On your news page:

<ul class="ul-news">
    <li>Home</li>
    <li>News</li>
</ul>

Etc. with all the other pages you have.

theasianpianist
  • 401
  • 4
  • 17
  • This would change the whole navigation bar background. I believe the OP would like an individual nav item's background to change. – hungerstar Apr 20 '17 at 14:10