如何从javascript更改css类

Question

>假设我想通过javascript或jquery动态地将以下内容的类更改为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');
});

-演示-

$(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标签中，但假设您正在谈论导航：例如，在您的帮助中心.html上，只需添加

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

Answer 5

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

如果要更改类，只需删除旧类并添加新类即可

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

注意：链接是jquery文档

Answer 6

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

$(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');