CODEWITHSUNDEEP
htmlcss
Mohan
Mohan

Reputation: 109

css menu active without jquery

How to add active class without jquery. I have sourced menu in simple css but i want active in different color. Could any body help me to add the active class to the menu

 #menu ul{
         margin: 0;padding: 0;
         list-style-type: none;
         font-family: verdana, arial, Helvetica, sans-serif;
         }
#menu li { 
         margin: 0 0 0px 0; 
         display: inline; float: left; 
         margin-left: 1px solid #ffffff;
         }
#menu a{
       display: block; padding: 5px 10px; 
       width: 100px; border-right: 2px solid #ffffff; 
       text-decoration: none;  border-left: 10px solid #1958b7;  
       color: #fff; background: #2175bc;
       }
#menu a:hover{
             color: pink; background: #2586d7;   
             border-left: 10px solid #1c64d1; 
             }

My intention is not active class; but when user click the tab, the color of the tab to be changed from hover color. So that i will not mention any active class in html body.

Upvotes: 0

Views: 2332

Answers (5)

Jan Turoň
Jan Turoň

Reputation: 32912

You can use classList in modern browsers.

Here are the faster native versions of jQuery class manipulation:

.addClass(className)     element.classList.add(className)
.removeClass(className)  element.classList.remove(className)
.toggleClass(className)  element.classList.toggle(className)
.hasClass(className)     element.classList.contains(className)

Note: see how ineffective is jQuery 1.10.1

hasClass: function( selector ) {
  var className = " " + selector + " ",
    i = 0,
    l = this.length;
  for ( ; i < l; i++ ) {
    if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {
      return true;
    }
  }
  return false;
}

Upvotes: 0

Timothy Groote
Timothy Groote

Reputation: 8643

Here's how to do it functionally in javascript without jQuery.

I'm taking into account that you want only one menu item to be active at a time.

<script type="text/javascript">
    function menuItemClicked(sender, event)
    {
      var menuItem = sender;

      //we need to get rid of the item that was active before
      var menuitems = document.getElementsByTagName("ul");
      for (var i = 0; i < menuitems.length; i++) 
      {
        //if this ul is a menu item
        if (menuitems[i].className.indexOf("menuitem") != -1) 
        {
          //reset its classname.
          menuitems[i].className = "menuitem";
        }
      }

      //and now we add the "active" class to the item we clicked.
      menuItem.className = dmenuItem.className + " active";
    }
</script>


<ul>
  <li class="menuitem" onclick="menuItemClicked(this, event)">I am a menu item</li>
  <li class="menuitem" onclick="menuItemClicked(this, event)">I am a menu item too</li>
</ul>

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

Try the following code:

CSS

#menu a:active {
    color: pink; background: #2586d7;   
    border-left: 10px solid #1c64d1; 
}

Upvotes: 2

Wouter van der Houven
Wouter van der Houven

Reputation: 448

You can try this:

document.getElementById("menu").className = "Active";

Or edit any other attribute like this.

Upvotes: 1

Nick R
Nick R

Reputation: 7784

It depends how you're implementing this, on a static site, you can just change the structure of the <li> that you want to be active, to:

<li class="active">

And then in your CSS

#menu li.active a { background:red; color:#fff; }

and if you want active and hover to be the same:

#menu a:hover, 
#menu li.active a { 
    background:red; color:#fff; 
}

Upvotes: 0

Related Questions