如何从javascript更改css类？

Question

假设我想通过javascript或者jquery动态的把下面的class改成class="active"怎么实现呢？

<!-- Navigator -->
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul id="yw0" class="nav">
                <li class="active"><a href="#" style="color: black">Company</a></li>
                <li><a href="#" style="color: black" class="link"><i class="fa fa-lightbulb-o"></i>&nbspFAQs</a></li>
                <li><a href="#" style="color: black" class="link"><i class="fa fa-question-circle"></i>&nbspHelp Center</a></li>
                <li><a href="#" style="color: black"><i class="fa fa-newspaper-o"></i>&nbspPress</a></li>
                <li><a href="#" style="color: black">Careers</a></li>
                <li><a href="#" style="color: black" href="#"><i class="fa fa-envelope-o"></i>&nbspContact Us</a></li>
            </ul>
        </div>
    </div>
</div>

我真的想知道如何更改 li 标签的类？

<li class="active">

我知道有一种方法可以使用http://api.jquery.com/addclass/ 但是我如何使用上面的示例来做到这一点。

Answer 1

用于在任何 HTML 元素中添加类

$("#id_of_element, .class_of_element, directly_name_of_element").addClass('active');

用于从任何 HTML 元素中删除类

$("#id_of_element, .class_of_element, directly_name_of_element").removeClass('active');

Answer 2

如果我理解您的预期行为，您可以将事件委托给 UL 元素，以便在 LI 点击时使用以下逻辑：

$("#yw0").on('click', 'li:not(.active)', function () {
    $(this).add('li.active').toggleClass('active');
});

-DEMO-

$(function () {
    $("#yw0").on('click', 'li:not(.active)', function () {
        $(this).add('li.active').toggleClass('active');
    });
});

li.active {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul id="yw0" class="nav">
                <li class="active"><a href="#" style="color: black">Company</a>
                </li>
                <li><a href="#" style="color: black" class="link"><i class="fa fa-lightbulb-o"></i>&nbspFAQs</a>
                </li>
                <li><a href="#" style="color: black" class="link"><i class="fa fa-question-circle"></i>&nbspHelp Center</a>
                </li>
                <li><a href="#" style="color: black"><i class="fa fa-newspaper-o"></i>&nbspPress</a>
                </li>
                <li><a href="#" style="color: black">Careers</a>
                </li>
                <li><a href="#" style="color: black" href="#"><i class="fa fa-envelope-o"></i>&nbspContact Us</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 3

http://api.jquery.com/addclass/

在 JQuery 中。

 $("li").addClass("active");

你需要一个更好的选择器来获得你需要的 li。

Answer 4

$("li").addClass("active");

在你的 CSS 中只有

.active {
    background: red;
}

尽管您最好的办法是知道哪个是活动的，然后将该类附加到相应页面上的 li 标记中，假设您正在谈论导航：例如，在您的 help-center.html 上，只需添加

 <li class="active"> rather than <li>

Answer 5

您可以使用 add class 使用 jquery 轻松添加类，并使用 remove class 删除类，是的，您猜对了，remove class

如果你想改变一个类，只需删除旧的并添加新的

$('#something').removeClass.('oldClass').addClass('newClass');

注意链接指向 jquery 文档

Answer 6

下面的代码会将类添加到最后一个..

$(document.ready(function() {
     $('.container li:last-child').addClass('active');
});

Answer 7

按类别选择项目：

$('.active').addClass('.non-active');
$('.active').removeClass('.active');

按类型选择项目：

$('li').addClass('.non-active');
$('ii').removeClass('.active');

按 id 选择项目：

$('#some_id').addClass('.non-active');
$('#some_id').removeClass('.active');