CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel Euchar
Daniel Euchar

Reputation: 1820

Menu Change sprite and color on click

I am trying to change my menu icons and color of text on click.

in my menu Each <li> element has a hyperlink tag there are 2 child below it <span class="icon"> and <div class="icon"> what i am trying to achieve is on click the class has to be changed to

<span class="icon active"> <div class="icon active"> and when the next menu item is clicked this active class has to be removed

JS Fiddel

HTML CODE

<div id="grid">
    <div id="menuBase">
      <div id="menu">
      <ul>
        <li><a href="#Page1" ><span class="icon" id="home"></span><div class="icon" id="mtext">Menu1&nbsp;&nbsp;</div></a></li>
        <li><a href="#aboutPage"><span class="icon" id="about"></span><div class="icon" id="mtext">Menu2</div></a></li>
        <li><a href=""><span class="icon" id="soln"></span><div class="icon" id="mtext">Menu 3</div></a></li>
        <li><a href="#"><span class="icon" id="lab"></span><div class="icon" id="mtext">Menu4</div></a></li>
        <li><a href="#"><span class="icon" id="port"></span><div class="icon" id="mtext">Menu5</div></a></li>
        <li><a href="#"><span class="icon" id="contact"></span><div class="icon" id="mtext">Menu6</div ></a></li>
      </ul>
      </div>
    </div>
</div>
​

CSS CODE

#grid{
    width: 750px;
    margin:0 auto;   
}
#menuBase{
    background: #fff;
    width:100%;
    height:44px;
    -webkit-border-radius: 90px 90px 0 0;
    -moz-border-radius: 90px 90px 0 0;
    border-radius: 90px 90px 0 0;
    border-right:2px solid #fff;

}


#menu{
    background: #E1E1E3;
    width:100%;
    height:100%;
    -webkit-border-radius: 99px 99px 0 0;
    -moz-border-radius: 99px 99px 0 0;
    border-radius: 99px 99px 0 0;
    border-right: 1px #fff solid;
    border: 2px    #ccc solid;
    border-right: none;
    border-bottom: none;
}

#hrhead{
    background: #cccccc;
    height: 3px;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    border-bottom: 1px #ffffff solid;
}

#hrfoot{
    background: #cccccc;
    height: 3px;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    border-top: 1px #ffffff solid;
}

#menu ul{
    float:left;
    width:100%;
    padding-left:43px;
    margin:0;
    list-style-type:none;
}

#menu li{
    display: block;
    float: left;
    width:40px;
    height: 25px;
    margin-right: 68px;
    margin-top: 11px;
}

#menu li:last-child{
    margin-right: 0px;
}

.icon{
    height:25px;
    width: 40px;
    display: block;
    color:#777777;
}

#mtext{
    height:27px;
    width: 80px;
    display: block;
    margin: 11px 0 0 -20px;
    text-align: center;

}
#menu li a{
    text-decoration:none;
}
#menu li a:hover #mtext{
    color:#DC0000;
}
#menu li a:hover .icon{
    background-position-y:24px;
}

#home{
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}

#about{
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}

#soln{
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}

#lab{
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}

#port{
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}

#contact{
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0;
}

.active{
    background-position-y:24px !important;
    color:#DC0000 !important;
}
​

Jquery [Damm i am lost]:

$("#menu > ul > li > a").click(function(e){
    e.preventDefault(); 

});

​

Upvotes: 0

Views: 956

Answers (3)

Rohit Pande
Rohit Pande

Reputation: 208

DEMO : http://jsfiddle.net/VLXxR/8/

$("#menu > ul > li > a").click(function(e){
     e.preventDefault(); 
     $("#menu .icon").removeClass("active");
     $(this).children(".icon").addClass("active")

  });

Upvotes: 2

user1305989
user1305989

Reputation: 3361

DEMO : http://jsfiddle.net/VLXxR/7/

 $("#menu > ul > li > a").click(function(e){
     e.preventDefault(); 
     $("#menu .icon").removeClass("active");
     $(this).find(".icon").addClass("active")

  });

Check out the documentation for removeClass - http://api.jquery.com/removeClass/

Upvotes: 1

rajesh kakawat
rajesh kakawat

Reputation: 10896

Your js should be like this ,FIDDLE

 $("#menu > ul > li > a").click(function(e){
     e.preventDefault();
     $("#menu > ul > li > a > div,#menu > ul > li > a > span").removeClass('active');

     $('div',this).addClass('active');
     $('span',this).addClass('active');
 });

Upvotes: 1

Related Questions