如何使图标的激活状态（边框-底部:5px实心红色）在点击时过渡到另一个图标？
每个图标的激活状态都有问题。应该发生的是；当图标被点击时，应该有一条红线出现在该图标下（边框-底部:5px实心红色），然后当你点击下一个图标时，之前点击的图标上的红线消失，而红线出现在你刚刚点击的图标上，如此等等，但当我点击其他两个图标时。红线只出现在第一个图标上；我点击哪一个都不重要。
null
function toggleTabs() {
const tabs = document.querySelector('#tabs');
tabs.classList.toggle('active');
}:root {
--primary-color: #e50914;
--dark-color: #141414;
--light-color: #f4f4f4;
}
.content {
position: relative;
height: 230px;
width: 100%;
background: var(--dark-color);
display: flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
font-size: 25px;
color: grey;
border-bottom: 5px solid rgb(70, 65, 65);
}
.tab-1, .tab-2, .tab-3 {
cursor: pointer;
padding: 20px;
padding-right: 30px;
padding-left: 30px;
}
.content > div:hover {
color: var(--light-color)
}
#tabs p {
font-size: 0.8em;
}
#tabs.active {
border-bottom: 5px solid red;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/e81277d7cc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<div class="content">
<div class="tab-1" id="tabs" onclick="toggleTabs()">
<span class="fas fa-door-open fa-2x"></span>
<p>Cancel at any time</p>
</div>
<div class="tab-2" id="tabs" onclick="toggleTabs()">
<span class="fas fa-tablet-alt fa-2x"></span>
<p>Watch anywhere</p>
</div>
<div class="tab-3" id="tabs" onclick="toggleTabs()">
<span class="fas fa-tags fa-2x"></span>
<p>Pick your price</p>
</div>
</div>null
共有1个答案
不是aby工作的最好代码
null
function toggleTabs(param) {
const tabs = document.querySelectorAll(".tab");
var i;
for (i = 0; i < tabs.length; i++) {
tabs[i].classList.remove("active");
}
tabs[param].classList.add("active");
}:root {
--primary-color: #e50914;
--dark-color: #141414;
--light-color: #f4f4f4;
}
.content {
position: relative;
height: 230px;
width: 100%;
background: var(--dark-color);
display: flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
font-size: 25px;
color: grey;
border-bottom: 5px solid rgb(70, 65, 65);
}
.tab-1, .tab-2, .tab-3 {
cursor: pointer;
padding: 20px;
padding-right: 30px;
padding-left: 30px;
}
.content > div:hover {
color: var(--light-color)
}
#tabs p {
font-size: 0.8em;
}
#tabs.active {
border-bottom: 5px solid red;
} <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/e81277d7cc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<div class="content">
<div class="tab" id="tabs" onclick="toggleTabs(0)">
<span class="fas fa-door-open fa-2x"></span>
<p>Cancel at any time</p>
</div>
<div class="tab" id="tabs" onclick="toggleTabs(1)">
<span class="fas fa-tablet-alt fa-2x"></span>
<p>Watch anywhere</p>
</div>
<div class="tab" id="tabs" onclick="toggleTabs(2)">
<span class="fas fa-tags fa-2x"></span>
<p>Pick your price</p>
</div>
</div>-
我正在尝试动画图标在我的应用程序每当它是被点击。我实现了我想要的简单动画，但它总是动画一次后，我来到那个屏幕。我希望每次点击时，它都应该是动画，并且它应该顺时针旋转，持续时间为2秒，当再次按下时，它应该逆时针旋转，持续时间为2秒。请帮帮我 这里是代码的部分-
-
更新：我通过添加previousMarker对象解决了性能问题。因此，只有先前点击的标记将被删除，并替换为默认图标。然而，当我单击标记时，信息窗口仍然没有显示。 我有一个地图视图，并在上面设置了一些标记。我想要的是当我点击一个标记时，它会改变它的图标为一个不同的图标，当我点击另一个标记时，前一个标记的图标应该改变为它原来的图标。 populateAllMarkersOnMap（）目前可以是如下所示
-
当前结果：下边框为灰色 所需结果：所有边框均为白色 问题：CSS中的边框颜色设置为白色
-
在图片和图片模式被激活后，我试图从任务中杀死活动，到目前为止，我尝试，，，以编程方式设置，但活动仍然在后台存在。 当我们单击该十字图标时，我们可以在中看到相同的行为。应用程序仍然存在于后台，但我需要残忍地杀死它：） 这就是我如何发射意图： 重要提示：当此活动不进入时，一切都按预期工作，并且在我需要时活动会正常杀死自己！ 当我点击这个十字图标时: pipActivity中的onStop被调用： 此时
-
我试图创建一个激活页面，以便当用户点击他们的激活链接时，它将引导用户到activate.php页面，并显示一条消息，说明阉羊帐户是否激活。 我的问题是，它一直显示消息“代码和用户名不匹配！帐户未激活。”它根本不显示成功消息“帐户已激活”，即使已单击激活链接。 此外，如果识别了正确的用户名和代码，数据库中的“活动”列应该更改为“1”，但它仍然显示“0”，这意味着帐户仍然不活动。 我的问题是，为什么它
-
本文向大家介绍使用opencv识别图像红色区域,并输出红色区域中心点坐标，包括了使用opencv识别图像红色区域,并输出红色区域中心点坐标的使用技巧和注意事项，需要的朋友参考一下 适用小白，大佬勿喷 个人配置：vs2013 ; opencv 3.0 ; 直接上效果图 注意：右下角的水印把中心点挡住了，要仔细看才能看到 下面是代码： 如有不足，望指点！ 补充知识：opencv 识别网球 ，或者绿色的