点击激活和停用CSS转换

我制作了一个包含6个元素的简单侧边栏导航菜单。下面是我想要的一个例子：

我点击第一个元素，菜单从2vh增长到4vh更改其颜色(过渡(
然后我点击第二个元素第二个元素增长，而第一个元素收缩(回到它原始样式(
然后，如果我再次单击第二个元素，我希望它也回到了正常的造型。和其他人一样元素

function scale() {
const element = document.getElementById('nav1');
element.classList.add('navmenu-clicked');
}

.navmenu {
color: #213362;
font-size: 2vh;
position: fixed;
left: 2%;
text-decoration: none;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
transition: all 2s;
}
.navmenu-clicked {
color: red;
font-size: 4vh;
}
#nav1 {
top: 30%;
}
#nav2 {
top: 40%;
}
#nav3 {
top: 50%;
}
#nav4 {
top: 60%;
}
#nav5 {
top: 70%;
}
#nav6 {
top: 80%;
}
.panel1,
.panel2 {
height: 100vh;
}
.panel1 {
background-color: red;
}
.panel2 {
background-color: blue;
}

<a class="navmenu" id="nav1" href="#" onclick="scale()">menu1</a>
<a class="navmenu" id="nav2" href="#" onclick="scale()">menu2</a>
<a class="navmenu" id="nav3" href="#" onclick="scale()">menu3</a>
<a class="navmenu" id="nav4" href="#" onclick="scale()">menu4</a>
<a class="navmenu" id="nav5" href="#" onclick="scale()">menu5</a>
<a class="navmenu" id="nav6" href="#" onclick="scale()">menu6</a>

我希望我已经解释好了。

谢谢！

如果我理解正确，您希望一次只突出显示一个链接，并在单击时切换活动链接样式。请参阅下面修改的代码段和我在JS代码段中的评论。请注意，我使用事件委派来处理点击事件，这是处理此类场景的标准方式。

let activeLink = null;
document.body.addEventListener("click", e => {
// First reset class of current active link (if it's not null)
if (activeLink) {
activeLink.classList.remove("navmenu-clicked");
}
const link = e.target;
if (link === activeLink) {
// Clicked on an active link 
activeLink = null;
} else {
activeLink = link;
activeLink.classList.add("navmenu-clicked");
}
});

.navmenu {
color: #213362;
font-size: 2vh;
position: fixed;
left: 2%;
text-decoration: none;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
transition: all 2s;
}
.navmenu-clicked {
color: red;
font-size: 4vh;
}
#nav1 {
top: 30%;
}
#nav2 {
top: 40%;
}
#nav3 {
top: 50%;
}
#nav4 {
top: 60%;
}
#nav5 {
top: 70%;
}
#nav6 {
top: 80%;
}
.panel1,
.panel2 {
height: 100vh;
}
.panel1 {
background-color: red;
}
.panel2 {
background-color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<a class="navmenu" id="nav1" href="#">menu1</a>
<a class="navmenu" id="nav2" href="#">menu2</a>
<a class="navmenu" id="nav3" href="#">menu3</a>
<a class="navmenu" id="nav4" href="#">menu4</a>
<a class="navmenu" id="nav5" href="#">menu5</a>
<a class="navmenu" id="nav6" href="#">menu6</a>
<script src="app.js"></script>
</body>
</html>

您可以将this传递到onclick中，这样您只添加/删除单击的元素的类，并使用querySelector删除单击的类(如果它不是当前单击的元素(-代码中的注释解释发生了什么

function scale(element) {
if (element.classList.contains('navmenu-clicked')) {
// check if clicked element has already been clicked - if so remove class
element.classList.remove('navmenu-clicked');
} else {
const clicked = document.querySelector('.navmenu-clicked');
if (clicked) {
// check if there is a clicked element and remove the class if there is
clicked.classList.remove('navmenu-clicked');
}
// add class to clicked element
element.classList.add('navmenu-clicked');
}
}

.navmenu {
color: #213362;
font-size: 2vh;
position: fixed;
left: 2%;
text-decoration: none;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
transition: all 2s;
}
.navmenu-clicked {
color: red;
font-size: 4vh;
}
#nav1 {
top: 30%;
}
#nav2 {
top: 40%;
}
#nav3 {
top: 50%;
}
#nav4 {
top: 60%;
}
#nav5 {
top: 70%;
}
#nav6 {
top: 80%;
}
.panel1,
.panel2 {
height: 100vh;
}
.panel1 {
background-color: red;
}
.panel2 {
background-color: blue;
}

<a class="navmenu" id="nav1" href="#" onclick="scale(this)">menu1</a>
<a class="navmenu" id="nav2" href="#" onclick="scale(this)">menu2</a>
<a class="navmenu" id="nav3" href="#" onclick="scale(this)">menu3</a>
<a class="navmenu" id="nav4" href="#" onclick="scale(this)">menu4</a>
<a class="navmenu" id="nav5" href="#" onclick="scale(this)">menu5</a>
<a class="navmenu" id="nav6" href="#" onclick="scale(this)">menu6</a>

相关内容

最新更新

热门标签：