Question

我试图使用“bigbox”类将div更改为classe“largebox2”，当点击按钮bt1或bt2时，我知道我需要使用javascripte但我不知道如何
这是我的代码

的 HTML

<div class="largebox" id="largebox"><div class="t2">مرحبا بكم في موقع <span class="t1span"> عشاق تشلسي العرب</span></div><hr class="line" />
<center>
<table><tr><td><button id="bt1" class="bot" > تسجيل الدخول </button></td><td><button id="bt2" class="bot" > انشاء حساب </button></td></tr></table>

<小时/> 的 CSS

.largebox2
{
background-color:#FFF;
width:100%;
height:25%;
position:absolute;
top:5%;
left:0;
box-shadow:0px 0px 19px #00FF33;
z-index:1;
}
.largebox
{ 
background-color:#FFF;
width:100%;
height:25%;
position:absolute;
top:35%;
left:0;
box-shadow:0px 0px 19px #FF0000;
z-index:1;

}

Answer 1

var elems = document.getElementsByClassName('largebox');
for(var i=0; elem = elems[i++];)
  elems.addEventListener('click', (function(){
    this.setAttribute('class', 'largebox2');
  }).bind(elem));

这有效地考虑了具有班级名称＆＃39; largebox＆＃39;的所有元素。迭代它们，并为每个添加一个事件监听器，点击时将触发。被激活的函数会将类更改为＆＃39; largebox2＆＃39;如你所愿。

Answer 2

在jQuery中，这样的事情可能会起作用：

$(".largebox").on("click", function() {
  $(this).removeClass("largebox").addClass("largeBox2")
});

http://api.jquery.com/removeclass/

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

Answer 3

当您单击类.bot

中的任何一个按钮时，您可以使用下面的代码

$(".bot").click(function()
{
  $("#largebox").removeClass("largebox").addClass("largeBox2");
});

Answer 4

你也可以尝试这个，的document.getElementById（＆＃34; largebox＆＃34）。类名=＆＃34; largebox2＆＃34 ;;

Answer 5

您可以尝试使用jQuery，这很简单，

 $(document).ready(function(){
   $('div_name').click(function(){
       $(this).removeClass('css_class_name');},
       function(){
       $(this).addClass('css_class_name');
      }
    );
 });

我如何在单击元素时更改CSS类

5 个答案: