jquery - CSS 菜单列表和 OnClick(事件颜色)

Question

我根据网上找到的教程创建了一个菜单，并且希望更进一步。我想让每个链接完全更改为单击时指定的背景颜色。我尝试使用 a:active 但这似乎不起作用。这是我到目前为止所拥有的，也许我需要使用一些 J-Query？这是fiddle和代码

<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

对此有一些乐趣。

jQuery 解决方案

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

您只需将事件类添加到您的 CSS 中即可。 http://jsfiddle.net/bplumb/EDZ8F/7/

纯 CSS 解决方案

更具挑战性和局限性。我创建了一个示例，说明您可以使用 :target psudeo-class 执行哪些操作。

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

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>

相关 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; 
}