. addclass为元素添加了样式然后删除，我该如何修复?

.addClass to element adds a styling then removes, how do I fix

本文关键字：何修复 删除 然后 元素 添加 样式 addclass      更新时间：2023-09-26

我有代码

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

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

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 !

有一种不需要jQuery的方法:

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

方法类似:

(function ($) {
    $('.arrowgreen > ul > li > a').on('click', function (e) {
        e.preventDefault();
        $(this).addClass('selected').siblings().removeClass('selected');
    }); 
}(jQuery));
相关文章：