0

style.css 中定义了垂直菜单。一旦用户选择了特定的菜单项，我想激活“活动”样式。我不能把它放在class="active"里面<a，因为这样该项目将始终处于活动状态。我想要的是在选择项目后应用“活动”样式。

<ul id = "vertmenu">
    <li>
        <img style='float: left; margin-right: 5px;' src='images/mailIcon.png'/>
        <a href="#" onclick="change_page('tables/111.php', 'col2')"><span>111</span></a>
    </li>
    <li>
        <img style='float: left; margin-right: 5px;' src='images/calendarIcon.png'/>
        <a href="#" onclick="change_page('tables/222.php', 'col2')"><span>222</span></a>
    </li>
    <li>
        <img style='float: left; margin-right: 5px;' src='images/contactsIcon.png'/>
        <a href="#" onclick="change_page('tables/333.php', 'col2')"><span>333</span></a>
    </li>
    <li>
        <img style='float: left; margin-right: 5px;' src='images/contactsIcon.png'/>
        <a href="#" onclick="change_page('tables/444.php', 'col2')"><span>444</span></a>
    </li>
</ul>

<!-- --------- CSS ----------- -->
    ul#vertmenu li a.active, ul#vertmenu li a.focus {
        background: none repeat scroll 0 0 #FFCF8B;
        outline-style: none;
        color: #AA0000;
        font-weight: bold;
        text-decoration: underline;
        }

    #vertmenu .active{
    background: none repeat scroll 0 0 #FFCF8B;
    outline-style: none;
    color: #AA0000;
    font-weight: bold;
    text-decoration: underline;
}

更新 2；

<head>
            <script>  
 var links = document.getElementById("vertmenu").getElementsByTagName("a");

for(var i = 0; i < links.length; i++){
    links[i].onclick = function(event){
        for(var j = 0; j < links.length; j++){
            links[j].classList.remove('active');
        }
        event.target.parentNode.classList.add('active');
        change_page('tables/'+event.target.innerHTML+'.php','col2');
        return false;
    };
}​

            </script>
</head>
4

2 回答 2

1

这样的事情怎么样？http://jsfiddle.net/49M49/

var links = document.getElementById("vertmenu").getElementsByTagName("a");

for(var i = 0; i < links.length; i++){
    links[i].onclick = function(event){
        for(var j = 0; j < links.length; j++){
            links[j].classList.remove('active');
        }
        event.target.parentNode.classList.add('active');
        change_page('tables/'+event.target.innerHTML+'.php','col2');
        return false;
    };
}​

或在 jQuery 中：

$("#vertmenu a").each(function(){
    $(this).click(function(){
        $("#vertmenu a").removeClass('active');
        $(this).addClass('active');
        change_page('tables/'+$(this).find("span")[0].text()+'.php','col2');
    });
});
于 2012-05-14T10:50:30.260 回答
0 
ul#vertmenu li a:active
{
    /*Styling*/
}
于 2012-05-14T10:39:05.533 回答