如何从 javascript 更改 css class？

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 标签的 class？

<li class="active">

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

Answer 1

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

在JQuery.

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

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

Answer 2

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

而在你的 CSS 中只有

.active {
    background: red;
}

虽然您最好的办法是知道哪个是活动的并且只需将 class 附加到相应页面上的 li 标记，假设您正在谈论导航：例如，在您的帮助-center.html, 只需添加

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

Answer 3

您可以使用 add class, and remove with, yep you guessed it, remove class

使用 jquery 轻松添加 classes

如果要更改 class，只需删除旧的并添加新的

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

N.b。链接指向 jquery 文档

Answer 4

select 一个项目 class:

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

select 个项目（按类型）：

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

到 select 个 id 的项目：

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

Answer 5

下面的代码会将 class 添加到最后一行..

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

Answer 6

如果我理解您的预期行为，您可以将事件委托给 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 7

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

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

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

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

如何从 javascript 更改 css class？

How to change css class from javascript?

javascript

navigation

jquery

yii

-DEMO-