CSS Menu List et OnClick (couleur active)

Question

J'ai créé un menu à partir d'un didacticiel que j'ai trouvé en ligne et je souhaite aller plus loin. J'aimerais que chaque lien change complètement à la couleur d'arrière-plan spécifiée quand on clique dessus. J'ai essayé d'utiliser un: actif mais cela ne semblait pas fonctionner. Voici ce que j'ai jusqu'ici, peut-être que je dois utiliser un certain J-Query? Voici le fiddle et le code

<div style="width: 1000px; margin: 0 auto; text-align:center; "> 
<ul id="menu"> 
<li><a class="anchor" href="#welcomeanchor">Home</a></li> 
<li><a class="anchor" href="#aboutusanchor">About Us </a></li> 
<li><a class="anchor" href="#classesanchor">Classes </a> </li> 
<li><a class="anchor" href="#scheduleanchor">Schedule</a></li> 
<li><a class="anchor" href="#newsanchor">News</a></li> 
<li><a class="anchor" href="#programsanchor">Programs</a></li> 
<li><a class="anchor" href="#contactanchor">Contact</a></li> 
</ul></div> 

CSS

#menu { 
    width: 940px; 
    margin: 0 auto;} 
    ul li { 
    background:#000; 
    list-style: none; 
    height: 50px; 
    float:left; 
    padding:0 0; 
    } 
    ul li a { 
    font-family: font3; 
    width: 134px; 
    height: 50px; 
    line-height: 53px; 
    border-bottom: 6px solid #636393; 
    color: #fff; 
    font-size:13px; 
    text-transform: uppercase; 
    text-align:center; 
    text-decoration: none; 
    display: block; 
    -webkit-transition: .2s all linear; 
    -moz-transition: .2s all linear; 
    -o-transition: .2s all linear; 
    transition: .2s all linear; 
    } 
    li:nth-child(1) a { 
    border-color: #fff; 
    } 
    li:nth-child(2) a { 
    border-color: #FF6; 
    } 
    li:nth-child(3) a { 
    border-color: #F60; 
    } 
    li:nth-child(4) a { 
    border-color: #00F; 
    } 
    li:nth-child(5) a { 
    border-color: #0C6; 
    } 
    li:nth-child(6) a { 
    border-color: #63C; 
    } 
    li:nth-child(7) a { 
    border-color: #F00; 
    } 
    li:nth-child(1) a:hover { 
    color: #000; 
    border-bottom: 55px solid #fff; 
    height: 1px; 
    } 
    li:nth-child(2) a:hover { 
    color: #000; 
    border-bottom: 55px solid #ff6; 
    height: 1px; } 
    li:nth-child(3) a:hover { 
    border-bottom: 55px solid #f60; 
    height: 1px; } 
    li:nth-child(4) a:hover { 
    border-bottom: 55px solid #00f; 
    height: 1px; } 
    li:nth-child(5) a:hover { 
    border-bottom: 55px solid #0c6; 
    height: 1px; } 
    li:nth-child(6) a:hover { 
    border-bottom: 55px solid #63c; 
    height: 1px; } 
    li:nth-child(7) a:hover { 
    border-bottom: 55px solid #f00; 
    height: 1px; } 

Answer 1

sorte de plaisir avec eu cela.

La solution jQuery

$('.anchor').click(function(){ 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Vous avez juste besoin d'ajouter la classe active à votre css. http://jsfiddle.net/bplumb/EDZ8F/7/

La Pure CSS Solution

est un peu plus difficile et limité. J'ai créé un exemple de ce que vous pourriez faire en utilisant la classe psudeo :target.

http://jsfiddle.net/bplumb/EDZ8F/6/

Le code HTML

<div style="width: 1000px; margin: 0 auto; text-align:center; "> 
    <ul id="menu"> 
     <li id="welcomeanchor"><a class="anchor" href="#welcomeanchor">Home</a> 
      <div><p>Home Content</p></div>  
     </li> 
     <li id="aboutusanchor"><a class="anchor" href="#aboutusanchor">About Us </a> 
      <div><p>About Us Content</p></div> 
     </li> 
     <li id="classesanchor"><a class="anchor" href="#classesanchor">Classes </a> 
      <div><p>Classes Content</p></div> 
     </li> 
     <li id="scheduleanchor"><a class="anchor" href="#scheduleanchor">Schedule</a> 
      <div><p>Schedule Content</p></div> 
     </li> 
     <li id="newsanchor"><a class="anchor" href="#newsanchor">News</a> 
      <div><p>News Content</p></div> 
     </li> 
     <li id="programsanchor"><a class="anchor" href="#programsanchor">Programs</a> 
      <div><p>Programs Content</p></div> 
     </li> 
     <li id="contactanchor"><a class="anchor" href="#contactanchor">Contact</a> 
      <div><p>Contact Content</p></div> 
     </li> 
    </ul> 
</div> 

pertinentes changé CSS

#menu li:not(:target) div{ 
    display: none; 
} 
#menu li div{ 
    position: absolute; 
    left: 75px; 
} 
li:nth-child(1) a:hover, li:nth-child(1):target a { 
    color: #000; 
    border-bottom: 55px solid #fff; 
    height: 1px; 
} 
li:nth-child(2) a:hover, li:nth-child(2):target a{ 
    color: #000; 
    border-bottom: 55px solid #ff6; 
    height: 1px; 
} 
li:nth-child(3) a:hover, li:nth-child(3):target a{ 
    border-bottom: 55px solid #f60; 
    height: 1px; 
} 
li:nth-child(4) a:hover, li:nth-child(4):target a{ 
    border-bottom: 55px solid #00f; 
    height: 1px; 
} 
li:nth-child(5) a:hover, li:nth-child(5):target a{ 
    border-bottom: 55px solid #0c6; 
    height: 1px; 
} 
li:nth-child(6) a:hover, li:nth-child(6):target a{ 
    border-bottom: 55px solid #63c; 
    height: 1px; 
} 
li:nth-child(7) a:hover, li:nth-child(7):target a{ 
    border-bottom: 55px solid #f00; 
    height: 1px; 
} 

Answer 2

Vous pouvez spécifier actif à chaque élément

DEMO http://jsfiddle.net/kevinPHPkevin/EDZ8F/2/

li:nth-child(1) a:active { 
color: #fff; 
} 
li:nth-child(2) a:active { 
color: #ff6; 
} 
li:nth-child(3) a:active { 
    color:#f60; 
} 
li:nth-child(4) a:active { 
    color:#00f; 
} 

Answer 3

Essayez cette

Dans Js

$(document).ready(function(){ 
    $(".anchor").click(function(){ 
     $(".anchor").each(function(){ 
      $(this).parent("li").css("background","#000") 
     }) 
     var color1 = $(this).css("border-color"); 
     $(this).parent("li").css("background",color1); 
    }) 
}) 

FIDDLE

Answer 4

var a = $('a.anchor'); 
$(a).click(function() { 

    $(a).removeClass('active'); 
    $(this).addClass('active'); 

}); 

http://jsfiddle.net/EDZ8F/4/