Question

说，我有一个包含多个部分的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>

该网站有两个简单的CSS规则;一个用于＆＃34;正常部分＆＃34;和其他用于＆＃34;活跃部分＆＃34;。

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

javascipt的.onclick属性有助于找到点击的部分。一旦我们有了clicked部分，它的class属性就被设置为＆＃34; active＆＃34;所以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;
}
};

到目前为止这么好，但在这里我失去了抓地力。如何让代码一次只标记一个活动的部分？现在，它会在单击时将多个部分标记为活动状态。但我想要做的是，一旦检测到活动部分，它应该自动清除最后点击或活动的部分，表示一次只有一个活动部分＆＃34;。非常感谢。

Answer 1

为了只在一个元素上使用“Active”类，你必须删除以前选中的元素为“Active”的“active”类。

如果你想使用jQuery，你可以简单地编写下面的代码。

$('.Active').removeClass('Active');

使用Javascript：

好吧，没有内置方法可以使用javascript删除类。您可以编写自定义函数“removeClass”，如下所示，并直接调用它：removeClass('Active');

function removeClass(className) {
    // convert the result to an Array object
    var els = Array.prototype.slice.call(
        document.getElementsByClassName(className)
    );
    for (var i = 0, l = els.length; i < l; i++) {
        var el = els[i];
        el.className = el.className.replace(
            new RegExp('(^|\\s+)' + className + '(\\s+|$)', 'g'),
            '$1'
        );
    }
}

Answer 2

从所有部分中删除className active，并仅为所需部分设置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;
}
};

Answer 3

试试这个

$(function(){

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

  });

})

您可以从jquery.com下载jquery 在这里documentation

Answer 4

http://jsfiddle.net/nL0kau9u/1/

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

}
};

Answer 5

function dothis（eventObj）{

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;

}

Answer 6

这是另一个，玩得开心^^

＆＃13;

init();
function init() {

}

function dothis(test) {
    var Celm = test;    
    var classItem = document.getElementsByClassName("active");
    if (classItem.length > 0){        
        classItem[0].className = "";
        var name = "active";
        Celm.className= name;
    }else{        
        var name = "active";
        Celm.className= name;
    }
}

＆＃13;

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

＆＃13;

<section class="" id="text1" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text2" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text3" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

＆＃13;

Answer 7

通过使用jQuery查看以下函数 http://api.jquery.com/removeclass/

和 http://api.jquery.com/addClass/

最后但并非最不重要 http://api.jquery.com/toggleClass/

此致 [R

当用户移动到下一次单击时，如何让JavaScript清除以前的onclick元素？

7 个答案: