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样式。单击某个元素时，我想将“selected”类名应用于该元素。它会暂时执行此操作，然后恢复原状。

css看起来像

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

Answer 1

Working jsFiddle Demo

在代码中使用$时，我发现您使用的是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

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

无论如何，有一种方法可以做到这一点：

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

.addClass to element添加样式然后删除，我该如何修复

3 个答案: