在鼠标单击时切换 CSS 类 [关闭]答案

【问题标题】：Switching CSS class on mouse click [closed]在鼠标单击时切换 CSS 类 [关闭]
【发布时间】：2014-05-30 01:34:17
【问题描述】：

如何通过单击按钮切换另一个类赋予 div 的初始类。

在这种情况下，一旦用户单击其中一个按钮，我想将类“largebox”切换为“largebox2”。

    .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;

    }

 <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>
</center>

【问题讨论】：

查看jquery文档中的click、removeClass、addClass
请参考stackoverflow.com/questions/2221160/…

标签： javascript html css

【解决方案1】：

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

这有效地考虑了类名为“largebox”的所有元素。遍历它们，并为每个添加一个事件侦听器，该侦听器将在单击时触发。触发的函数将根据您的意愿将类更改为“largebox2”。

【讨论】：

请你解释更多:)
它的工作谢谢大家：*
像这样
javascripte HTML

【解决方案2】：

在 jQuery 中，这样的事情可能会完成这项工作：

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

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

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

【讨论】：

它的工作谢谢大家：*
像这样
javascripte HTML

【解决方案3】：

当您单击 .bot 类的任何按钮之一时，您可以使用以下代码

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

【讨论】：

【解决方案4】：

你也可以试试这个， document.getElementById("largebox").className="largebox2";

【讨论】：

【解决方案5】：

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

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

【讨论】：