javascript - .addClass 到元素添加样式然后删除，我该如何修复

Question

我有一个代码

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

Answer 1

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

Answer 2

工作 JSFiddle

您的 HTML 中有一个错误，它在 ."之后打开了一个新字符串onclick。

var prev;

function addClass(classname, element) {
    var cn = document.getElementById(element);
    prev = cn; //does nothing useful really
    $(cn).addClass("selected");
}

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

记得包含jQuery在您的页面中！

无论如何，有一种方法可以在没有 jQuery 的情况下做到这一点：

function addClass(classname, element) {
    var cn = document.getElementById(element);
    prev = cn; //does nothing useful really
    cn.className += " " + classname;
}

Answer 3

类似的方法：

(function ($) {

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

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

    }); 

}(jQuery));