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 に答える