单击元素时如何添加和删除元素的 class

Question

我创建了一个导航栏和选项（它们是图标）<a> 现在我想在选择其中一个时更改 css

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1 noPadding">
                <a href="?t=" id="bookfli"><div class="btn2" ><img src="img/flight_icon1.png" class="img-responsive center-block"></div></a>
            </div>

            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 noPadding">
                <a href="?t=bookholidays" id="bookholi"><div class="btn1" ><img src="img/holidays_icon.png" class="img-responsive center-block"></div></a>
            </div>


        </div>
        <div class="clearfix"></div>
<script>

    $().ready(function(){
        var bookflights,bookhotels,bookpackages,bookbus,bookholidays;

        bookholidays = $("#bookholi div");
        console.log(bookholidays);
        bookflights = $("#bookfli div");
        //var queryholi=$(document).querySelector(bookholidays);

        $("#bookholi").click(function(){


                bookholidays.removeClass("btn1").addClass("btn2");

                bookflights.removeClass("btn2").addClass("btn1");

            });

    });


</script>

btn1 和 btn2 是我想玩的两个类

Answer 1

试试这个...您可能会丢失与“#bookholi div”的绑定。

$(document).ready(function(){
    var bookflights,bookhotels,bookpackages,bookbus,bookholidays;

    bookholidays = $("#bookholi");
    bookflights = $("#bookfli");

    $("#bookholi").click(function(){

        var obj = bookholidays.find('div');
        if(obj.hasClass("btn1"))
            obj.addClass("btn2").removeClass("btn1")

        else if(obj.hasClass("btn2"))
            obj.addClass("btn1").removeClass("btn2")
    });

});

Answer 2

实际上问题出在标签 <a> 我使用过 <a> 所以每当我们使用 a 作为标签时它都会重新加载具有不同位置的页面。之所以会卡，是因为标签a每次点击都会刷新整个css和js。

所以，有时问题的解决方案就在你面前

单击元素时如何添加和删除元素的 class

how can I add and remove class of a element whenever it is clicked

jquery

user-interface

hyperlink

event-handling