0

私はコードをもっている

var prev;
function addClass( classname, element ) {
    prev = cn;
    var cn = document.getElementById(element);

    $(cn).addClass("selected");
}

dom の要素は次のようになります。

<div class="arrowgreen">
    <ul>
        <li><a href="" onclick="addClass('selected','first')" id="first">Manager</a></li>
        <li><a href="" onclick="addClass('selected','second')" id="second" ">Planner</a></li>
        <li><a href="" onclick="addClass('selected','third')" id="third">Administrator</a></li>
    </ul>
</div>

「arrowgreen」には、ロールオーバーとクリックで li のスタイルを変更するスタイルがあります。要素がクリックされたときに、「選択した」クラス名を要素に適用したいと考えています。一瞬これを行い、その後元に戻ります。

cssは次のようになります

.arrowgreen li a.selected{
    color: #26370A;
    background-position: 100% -64px;
}
4

3 に答える 3

2

動作中のjsFiddleデモ

あなたのコードでの使用法で$は、jQuery を使用していることがわかります。onclick内部で設定する必要はありません。jQuery で処理してみましょう。

// wait for dom ready
$(function () {
    // when user clicks on elements
    $('.arrowgreen li a').on('click', function (e) {
        // prevent default the behaviour of link
        e.preventDefault();

        // remove old `selected` classes from elements
        $('.arrowgreen li a').removeClass('selected');

        // add class `selected` to current element
        $(this).addClass('selected');
    });
});
于 2013-05-27T09:23:19.497 に答える
0

それを行う同様の方法：

(function ($) {

    $('.arrowgreen > ul > li > a').on('click', function (e) {

        e.preventDefault();
        $(this).addClass('selected').siblings().removeClass('selected');

    }); 

}(jQuery));
于 2013-05-27T09:50:29.710 に答える