Question

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>

Answer 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');
    });
});

Answer 2

ul#vertmenu li a:active
{
    /*Styling*/
}

垂直菜单中的活动项目

2 个答案: