CODEWITHSUNDEEP
javascriptjqueryhtmlcsshighlight
user3055406
user3055406

Reputation: 33

How do I keep a li highlighted in JavaScript?

I know there are other topics on this subject, but none of them are noob friendly ;) I need to make a website for school, and I want to keep a li highlighted after I click it.

Here is what I've got:

<!DOCTYPE html>        
<html>
<title> De Vakman Wiersema </title>
<head>


<script type="text/javascript">
  <!--

  //-->
</script>
<style>

  body {
  background-color: #F2EEE6;
  } 
  a {
  text-decoration:none;
  color: #FFFFFF;
  }
  div.head {
  width: 1100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border: 1px solid black;
  background-color: #F2EEE0;      
  }
  div.underhead {
  width: 110px;
  height: 500px;
  border: 1px solid black;
  background-color: #F2EEE0;
  }
  div.background {
  background-color: #7F7A76;
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0px;
  right: 0px;
  left: 0px; 
  }
  #img1 { 
  margin-left: 292px;
  margin-top: 10px;
  border: 1px solid black;
  } 
  #cssmenu {
  width: 1000px;
  font-family: Helvetica;
  color: #FFFFFF;
  position: absolute; 
  }
  #cssmenu ul {
  list-style-type:none;
  padding:10px;
  overflow:hidden;
  background-color:#98BF21;
  margin-left: 292px;
  border-radius: 4px 100px 4px 4px;  
  }
  #cssmenu a,
  #cssmenu a:link,{
  display:block;
  width:200px;
  height: 50px;
  border: 1px solid black;
  background-color:#98BF21;   
  }
  #cssmenu li { 
  float:left;
  margin-left: 50px;
  border-radius: 5px; 
  padding: 0px;
  display: inline-block;
  } 
  #cssmenu li a {
  background: #98BF21;
  display: block;
  padding: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  }     
  #cssmenu li a:hover {
  background: #11A304;
  }
  div.page {
  width: 990px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  background: #F7F5F5;
  border-radius: 5px;
  box-shadow: 0px 0px 20px 3px #7F7979;
  padding: 5px; 
  margin-top: 80px;    
  }

  </style>


  </head>

   <body> 
   <div class="background">
   <div class="logo">
    <a href="http://goo.gl/maps/jScbt" target="_blank">
      <img id="img1" src="images/logo.jpg" alt="Logo" height="150" width="220">
    </a>
   </div>
   <div id='cssmenu'>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#producten">Producten</a></li>
      <li><a href="#klussendienst">Klussendienst</a></li>
    </ul>
  </div>
  <div class="page">
    Text
  </div>
  </div>
  </body>
  </html>

(sorry for not using any of the "jsfiddle" or any of the other programs:-(

(P.S. Terms on the website are in Dutch)

Upvotes: 3

Views: 101

Answers (4)

adeneo
adeneo

Reputation: 318182

When you click a LI element, add a class to that LI element and remove the same class from any other LI elements that might have that class :

$('#cssmenu li').on('click', function() {
    $(this).addClass('active').siblings().removeClass('active');
});

FIDDLE

and the same without jQuery

var li = document.getElementById('cssmenu').getElementsByTagName('li');

for (var i=li.length; i--;) {
    if (document.attachEvent) {
        li[i].attachEvent('onclick', handler);
    }else if (document.addEventListener) {
        li[i].addEventListener('click', handler, false);
    }else{
        li[i].onclick = handler;
    }
}

function handler() {
    for (var i=li.length; i--;) {
        li[i].className = li[i].className.replace( /(?:^|\s)active(?!\S)/ , '' )
    }
    this.className = this.className + ' active';
}

FIDDLE

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

Without jQuery:

document.getElementById('cssmenu').onclick = function(e) {
    e = e || window.event;
    var t = e.srcElement || e.target;
    while(t != this && t.nodeName != "LI") t = t.parentNode;
    if( t.nodeName == "LI") {
        t.style.backgroundColor = "#11A304";
    }
};

Upvotes: 2

Michael Peterson
Michael Peterson

Reputation: 1123

If you don't mind using jQuery, you can add a class on click and in your css have that class provide the highlighted background:

jQuery:

$('#cssmenu li a').click(function () {
    $(this).addClass('highlighted');
});

CSS:

 #cssmenu li a.highlighted {
      background: #11A304;
  }

JSFIDDLE: http://jsfiddle.net/ZyK93/

Upvotes: 0

Alberto Fontana
Alberto Fontana

Reputation: 948

You can use Jquery. It's a simple and fast and powerful library that allows you to do great things with little code (it's a javascript library). If you paste this in your page you can get what you want:

<script type="text/javascript">
    $('li').click(function(){
      $(this).css( 'background-color', 'yellow' );
    });
</script>

EXPLANATION With $('identifier') you can bind an event to a specific element of a page...it can be an html tag, an id or a class. In this case we are binding the click to the li elements.

Once the click happens, the code inside the function(){} is executed. With the variable this we refer to the element just clicked. With the method .css (a method of the Jquery library) we change the property we desire.

It can be translated like: "Every time a click a li element, do the following: take the element just clicked and change its css: change its background color to yellow".

Upvotes: 1

Related Questions