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

试试这个

在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 2

有点好玩。

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

Answer 3

您可以为每个元素指定有效

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 4

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

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

});

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

CSS菜单列表和OnClick（活动颜色）

4 个答案: