如何让JavaScript在用户进行下一次单击时清除上一个onclick元素？_Javascript_Html_Css_Dom

如何让JavaScript在用户进行下一次单击时清除上一个onclick元素？

javascript html css dom

如何让JavaScript在用户进行下一次单击时清除上一个onclick元素？,javascript,html,css,dom,Javascript,Html,Css,Dom,比如说，我有一个包含多个部分的HTML站点 <html> . . . <body> <section class="" id="text1" name="texts"> <p> this is sample text yaday ayda yaday yada blah blah blah </p> </section> <section class="" id="text2" name="texts">

比如说，我有一个包含多个部分的HTML站点

<html>
 .
 .
 .
<body>

<section class="" id="text1" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text2" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text3" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>
  <!-- and so on --------->
</body>
</html>

<style>
section {
    margin-left: 10px;
    padding: 10px;
    position: relative;
    border-style: solid;
    border-width: 2px;

     box-sizing: border-box;
    width: 50%;
    float: left;
 }

section.active {
 width: 300px;
 height: 100px;
 background-color: yellow;
 box-shadow: 10px 10px 5px #888888;
}
</style>


.
.
.
这是示例文本yaday-ayda-yaday-yada-blah-blah
这是示例文本yaday-ayda-yaday-yada-blah-blah
这是示例文本yaday-ayda-yaday-yada-blah-blah

该网站有两个简单的css规则；一个用于“正常区段”，另一个用于“活动区段”


部分{
左边距：10px；
填充：10px；
位置：相对位置；
边框样式：实心；
边框宽度：2倍；
框大小：边框框；
宽度：50%；
浮动：左；
}
第1节活动{
宽度：300px；
高度：100px；
背景颜色：黄色；
盒影：10px 10px 5px#8888888；
}

javascipt的.onclick属性有助于定位单击的部分。一旦我们点击了section，它的class属性被设置为“active”，因此section.active CSS可以像这样应用：

Window.onload = init;
function init() {
var Elems = document.getElementsByName("texts")
for (var i = 0; i<Elems.length; i++) {
    Elems[i].onclick = dothis;
};

function dothis(eventObj) {
    var Celm = eventObj.target;
    var name = "active";
    Celm.className= name;
}
};

Window.onload=init；
函数init（）{
var Elems=document.getElementsByName（“文本”）
对于（var i=0；i从所有节中删除classNameactive
，并仅为所需节设置active
类
Window.onload = init;
function init() {
var Elems = document.getElementsByName("texts");
for (var i = 0; i<Elems.length; i++) {
    Elems[i].onclick = dothis;
};

function dothis(eventObj) {    
    var Celm = eventObj.target;
    var name = "active";
    var Elems = document.getElementsByName("texts");

    // This will remove the className active from all sections
    Elems.className = Elems.className.replace( /(?:^|\s)active(?!\S)/ , '' );

    // Once all active sections are cleared, this selects the required section
    Celm.className= name;
}
};

Window.onload=init；
函数init（）{
var Elems=document.getElementsByName（“文本”）；
对于（var i=0；i为了只在一个元素上有“Active”类，您必须删除前面选择的元素的“Active”类，该元素的类为“Active”
如果您想使用jQuery来实现这一点，只需编写以下代码即可
$('.Active').removeClass('Active');

使用Javascript:
好的，没有使用javascript删除类的内置方法。您可以编写一个自定义函数“removeClass”，如下所示，并直接这样调用它：removeClass（'Active'）；

函数removeClass（类名）{
//将结果转换为数组对象
var els=Array.prototype.slice.call(
document.getElementsByClassName（类名称）
);
对于（变量i=0，l=els.length；i
试试这个
$(function(){

 $('section').on('Click',function(){
  $('section.active').removeClass('active');
  $(this).addClass('active');

  });

})

您可以从下载jquery
这里是

函数完成此操作（eventObj）{
var Celm=eventObj.target；
var name=“活动”；
对于（VarI=0；i函数点此（eventObj）{
var x=document.getElementsByClassName（“活动”）；
对于（var i=0；i

}这是另一个，祝你玩得开心^^

init（）；
函数init（）{
}
函数完成此操作（测试）{
var Celm=试验；
var classItem=document.getElementsByClassName（“活动”）；
如果（classItem.length>0）{
classItem[0]。className=“”；
var name=“活动”；
Celm.className=名称；
}否则{
var name=“活动”；
Celm.className=名称；
}
}
部分{
左边距：10px；
填充：10px；
位置：相对位置；
边框样式：实心；
边框宽度：2倍；
框大小：边框框；
宽度：50%；
浮动：左；
}
第1节活动{
宽度：300px；
高度：100px；
背景颜色：黄色；
盒影：10px 10px 5px#8888888；
}

这是示例文本yaday-ayda-yaday-yada-blah-blah
这是示例文本yaday-ayda-yaday-yada-blah-blah
这是示例文本yaday-ayda-yaday-yada-blah-blah
使用jQuery查看以下函数

及

最后但并非最不重要

问候
R你能使用jQuery吗？如果你能，那么在处理特定的onclick事件之前，你可以非常简单地使用它。@Mauro对不起，我对jQuery一无所知。不是杰克蹲坐
$(function(){

 $('section').on('Click',function(){
  $('section.active').removeClass('active');
  $(this).addClass('active');

  });

})

function dothis(eventObj) {
    var Celm = eventObj.target;
    var name = "active";
   for (var i = 0; i<Elems.length; i++) {
       if(Elems[i]!=Celm) {
           Elems[i].className='';
       }
       else {
           Elems[i].className=name;
       }
};

}
};

var x = document.getElementsByClassName("active");    
for (var i = 0; i < x.length; i++) {    
    x[i].className = "";    
}


var Celm = eventObj.target;
var name = "active";
Celm.className= name;