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

试试这个......你可能会失去对＃34; #bookholi div＆＃34;的绑定。

$(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每次点击都会刷新整个css和js。

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

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

2 个答案: