使用onlick更改div类名称，更改3个div，具体取决于单击哪个链接div的链接

Question

我有三个div，每个div都有一个链接，单击链接时，我希望所有三个div的类名都更改，具体取决于单击哪个链接。

每个div的类名均为w-33（这使div的宽度增加了33％），我需要将div的类更改为w-60和w-20。

我有它，所以当单击链接时，类名会改变，但这只是使第一个div w-60和另外两个w-20无关，无论单击哪个div链接，我不知道是否有更有效的方法为了使它如此，包含被单击链接的div是获得w-60类名称的那个，而不是为每个链接创建三个单独的函数，因此，我们将提供任何帮助。

这是onclick之前的三个div

<div class="w-33" id="first-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-33" id="second-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-33" id="third-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>

这是JavaScript

function changeclass() {
var NAME = document.getElementById("first-project")
NAME.className="w-60 ml-100 mp-100 project"

var NAME = document.getElementById("second-project")
NAME.className="w-20 ml-100 mp-100 project"

var NAME = document.getElementById("third-project")
NAME.className="w-20 ml-100 mp-100 project"
} 

这是onclick之后的三个div

<div class="w-60" id="first-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-20" id="second-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-20" id="third-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>

因此，如果单击第一个div中的链接，则它的类名将更改为w-60，而其他两个类将更改为w-20。 如果单击第二个div中的链接，则第一个和最后一个类将更改为w-20，第二个更改为w-60，如果单击第三个div的链接，则该类将为获取w-60类别名称的div 。

Answer 1

嘿，您可以借助这样的参数来做到这一点

<div class="w-33" id="first-project">
<a class="learn-more" onclick="changeclass(1)">Learn More</a>
</div>
<div class="w-33" id="second-project">
<a class="learn-more" onclick="changeclass(2)">Learn More</a>
</div>
<div class="w-33" id="third-project">
<a class="learn-more" onclick="changeclass(3)">Learn More</a>
</div>

function changeclass(div_number) {
if(div_number==1)
{
document.getElementById("first-project").className="w-60 ml-100 mp-100 project";
document.getElementById("second-project").className="w-20 ml-100 mp-100 project";
document.getElementById("third-project").className="w-20 ml-100 mp-100 project";
}
if(div_number==2)
{
document.getElementById("second-project").className="w-60 ml-100 mp-100 project";
document.getElementById("first-project").className="w-20 ml-100 mp-100 project";
document.getElementById("third-project").className="w-20 ml-100 mp-100 project";
}

} 

Answer 2

您可以将事件传递给函数，这将使您可以定位所单击的元素。 因此，在您的内联js中，它将为onclick="changeClass(event) 。然后该函数将如下所示：

    function changeClass(event) {
      // Set all elements classes to their defaults.
      document.getElementById("first-project").classList = ['w-20', 'project'];
      document.getElementById("second-project").classList = ['w-20', 'project'];
      document.getElementById("third-project").classList = ['w-20', 'project'];

      // Set new classes to the clicked element only
      event.target.classList = ['w-60', 'project'];
    }

Answer 3

你可以做这样的事情

<div class="projects">
    <div class="w-33" id="first-project">
        <a class="learn-more" onclick="changeclass(this)">Learn More</a>
    </div>
    <div class="w-33" id="second-project">
        <a class="learn-more" onclick="changeclass(this)">Learn More</a>
    </div>
    <div class="w-33" id="third-project">
        <a class="learn-more" onclick="changeclass(this)">Learn More</a>
    </div>
</div>

<script>
    function changeclass(elem) {
        let allDivs = document.querySelectorAll('.projects > div');
        for(let oneDiv of allDivs) {
            oneDiv.className = "w-20";
        }
        elem.parentNode.className = "w-60";
    }
</script>

Answer 4

这就是我要怎么做。 我会在css文件的类中定义css样式-

例如

.selected{
    color: white;
    background: steelblue;
}

而我的JS-

var resetButton = document.getElementById("reset");

现在，为了将css类应用于元素，我要做的是-

resetButton.classList.add("selected");

或者现在为了将css类删除到一个元素，我会这样做-

resetButton.classList.remove("selected");

或简单地切换

resetButton.toggleClass("selected");

Answer 5

您可以使用CSS选择器“ adjacent”（“。hilight + div” =选择“ .hilight”的所有邻居div）

 function hilight (hilightID) { var allDivs = document.getElementsByClassName('w-33'); for (i = 0; i < allDivs.length; i++) { const theDiv = allDivs[i]; const isHilight = theDiv.id === hilightID; if (isHilight) { theDiv.classList.add("hilight"); } else { theDiv.classList.remove("hilight"); } } } 

 .container { display: flex; } .container > div { background: salmon; } .w-33 { width: 33%; } .hilight { width: 60%; } .hilight + div { width: 20%; } 

 <div class="container"> <div class="w-33" id="first-project"> <a class="learn-more" onclick="hilight('first-project')">Learn More</a> </div> <div class="w-33" id="second-project"> <a class="learn-more" onclick="hilight('second-project')">Learn More</a> </div> <div class="w-33" id="third-project"> <a class="learn-more" onclick="hilight('third-project')">Learn More</a> </div> </div> 

Answer 6

我的解决方案。 将事件传递给函数，并将w-60类添加到当前元素。

 function changeClass(event) { document.querySelectorAll('.project').forEach(el => { el.classList.remove('w-60'); el.classList.add('w-20') }) let cls = event.target.parentNode.classList cls.remove('w-20'); cls.add('w-60'); } 

 #group { font-size: 26px; margin: 0px; display: flex; } .w-60, .w-20, .w-33 { display: inline-flex; justify-content: center; align-items: center; padding: 15px; border: 4px solid red; transition:all .5s; } .w-33 { width: 33%; } .w-60 { width: 60%; background: beige; } .w-20 { width: 19.4%; background: lightpink; } 

 <div id="group"> <div class="w-33 project" id="first-project"> <a class="learn-more" onclick="changeClass(event)">Learn More</a> </div> <div class="w-33 project" id="second-project"> <a class="learn-more" onclick="changeClass(event)">Learn More</a> </div> <div class="w-33 project" id="third-project"> <a class="learn-more" onclick="changeClass(event)">Learn More</a> </div> </div>