时间戳

首页 > 解决方案 > 根据单击哪个链接 div 的链接，使用 onlick 更改 div 类名称为 3 个 div

javascript - 根据单击哪个链接 div 的链接，使用 onlick 更改 div 类名称为 3 个 div

问题描述

我有三个 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的链接，则该div将获得w-60类名.

标签： javascripthtml

解决方案

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

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

}

推荐阅读