Question

让多个DIV使用Java onclick更改DIV类列表值之一，然后单击其他相同的DIV来更改类值，但是在更改DIV之前如何返回到后级值？

<div id="PART1"class="class1"><a href="" onclick="click1()">TEXT1</a></div>
<div id="PART2"class="class1"><a href="" onclick="click2()">TEXT2</a></div>
<div id="PART3"class="class1"><a href="" onclick="click3()">TEXT3</a></div>

<script>
    var div1=document.getElementByID(PART1);
    var div2=document.getElementByID(PART2);
    var div3=document.getElementByID(PART3);

    function click1(){
        div1.classList.remove("class1");
        div1.classList.add("class2");
    }

    function click2(){
        div2.classList.remove("class1");
        div2.classList.add("class2");
    }

    function click3(){
        div3.classList.remove("class1");
        div3.classList.add("class2");
    }
</script>

Answer 1

您需要在ID名称中添加引号，然后更改为getElementById而不是getElementByID

使用div1.classList.contains("class1"))检查div是否具有课程

还应添加href="#"以防止重新加载页面。

var div1=document.getElementById('PART1');
var div2=document.getElementById('PART2');
var div3=document.getElementById('PART3');

var div1=document.getElementById('PART1');
var div2=document.getElementById('PART2');
var div3=document.getElementById('PART3');

function click1(){
if(div1.classList.contains("class1")){
  div1.classList.remove("class1");
  div1.classList.add("class2");
}else{
div1.classList.remove("class2");
  div1.classList.add("class1");
}

}

function click2(){
if(div2.classList.contains("class1")){
  div2.classList.remove("class1");
  div2.classList.add("class2");
}else{
div2.classList.remove("class2");
  div2.classList.add("class1");
}
}

function click3(){
if(div3.classList.contains("class1")){
  div3.classList.remove("class1");
  div3.classList.add("class2");
}else{
div3.classList.remove("class2");
  div3.classList.add("class1");
}
}

.class1{
background-color:red;
}
.class2{
background-color:blue;
}

<div id="PART1"class="class1"><a href="#" onclick="click1()">TEXT1</a></div>
<div id="PART2"class="class1"><a href="#" onclick="click2()">TEXT2</a></div>
<div id="PART3"class="class1"><a href="#" onclick="click3()">TEXT3</a></div>

JavaScript onclick multi div更改类列表添加/删除返回

1 个答案: