Change Css Class of li in ul onclick

Below is the simple and a short code to change or set the background color of item in menu onclick or active tab of menu (i.e. li of ul)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>List Item</title>
<style type="text/css">
ul
{
    list-style-type:none;
    float:left;
    border-bottom: solid 2px Red;
    padding-right:40px;
}
ul li
{
    float:left;
    width:auto;
    padding:8px;
    display:block;
    cursor:pointer;
}
</style>

<script type="text/javascript" language="javascript">

    function checklist(ctrl)
    {
       
        var list = document.getElementById("menu").getElementsByTagName('li');
       
        for(i=0; i<list.length; i++)
        {
            list[i].style.background = '#ffffff';
        }
       
        ctrl.style.background = '#ff0000';
    }


</script>
</head>

<body>
<ul id="menu">
<li onclick="checklist(this);">A Item</li>
<li onclick="checklist(this);">B Item</li>
<li onclick="checklist(this);">C Item</li>
</ul>
</body>
</html>

Screenshot:-



The code is simple.. just copy and paste... Enjoy..

Comments

  1. Thanx....Very useful code.

    ReplyDelete
  2. I am a begginer and was searching internet for a long time to find this. Thanks a lot.

    ReplyDelete
  3. Hi Anish,
    usefull code,
    but if i add this ------- a href ="?page=one">home<a ------

    The code will not work , do you have a solution to this?
    plz reply if you have a solution.

    ReplyDelete
    Replies
    1. Here you go...
      but i have used # instead of ? because this become a query string and the page reloads and as you know javascript is static so it again loads with the page load. So you can use as in the below topic

      Change Css Class of li in ul onclick with Anchor Tag

      Or if you want to use ? then you have to write the code on each page by getting the url and set the button clicked

      Delete
    2. thanks for the quick reply,
      can u show an example using the query string.

      Delete
    3. check topic

      Change Css Class of li in ul onclick with Query String

      Delete
    4. hello Anish Rana when I'm using this not working so please tell me the exact answer I'm waiting for your response

      -----a-href="page.html"...

      Delete
    5. Hello Anand..
      For your solution you need to write script on each page that are linked to your menu.

      Check below topic

      Change Css Class of li in ul onclick - Menu Linked Pages

      Delete
  4. Hi friend helme please
    look this

    (Change Css Class of li in ul onclick - Menu Linked Pages
    Reply)

    no found
    onclick not kept in each html 1,2,3

    ReplyDelete
    Replies
    1. http://anishrana.blogspot.in/2014/05/change-css-class-of-li-in-ul-onclick_16.html
      here is the link

      Delete
  5. very simple code, working fine

    ReplyDelete
  6. Thank you very helpful. How can I default one of the menu items to be the 'selected' one on page load?

    ReplyDelete
    Replies
    1. add a class in style
      .selected
      {
      background : '#ff0000';
      }

      and then apply this class to list item which you want to be selected by default as below:

      li class="selected"

      Delete

Post a Comment

Popular posts from this blog

Get Query String Values With Javascript

Change Text Color with Javascript