我绞尽脑汁想弄清楚这一点。我试着添加$(document(.ready(function(｛并在脚本周围再次关闭它，但不是joy.
这是一个简单的过滤器。本应根据按钮显示/隐藏div元素。脚本将"活动"添加到单击的按钮，并将其从其他按钮中删除。
它在Code Pen上完全按照预期工作。然而，当在本地或服务器上运行它时，过滤器工作正常，"active"被添加到单击的按钮中，但"active"没有从最后一个按钮中删除，并保持堆叠(即，如果我单击snowdonia 4次，则类"active"将应用4次。如果我单击tryfan，则active将正确应用，但没有从上一个按钮删除(
我正在使用的代码如下。任何帮助都将不胜感激。Javascript与我的filter.js文件中显示的完全一样
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
var header = document.getElementById("myBtnContainer");
var btns = header.getElementsByClassName("btn-filter");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}.filterDiv {
display: none;
/* Hidden by default */
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
.btn-filter {
background-color: #fff;
border-radius: 0;
padding-right: 5px;
padding-left: 5px;
padding-top: 4px;
padding-bottom: 4px;
text-transform: uppercase;
font-family: 'Montserrat';
font-size: 14px;
font-weight: 600;
color: #91227e;
border: 2px;
border-style: solid;
border-color: #91227e;
}
.active,
.btn-filter:hover {
background-color: #91227e;
color: #fff;
}<div id="myBtnContainer">
<button class="btn-filter active" onclick="filterSelection('all')"> Show all</button>
<button class="btn-filter" onclick="filterSelection('snowdon')"> Snowdon</button>
<button class="btn-filter" onclick="filterSelection('tryfan')"> Tryfan</button>
<button class="btn-filter" onclick="filterSelection('glyder')"> Glyder</button>
</div>以下是我在html文件中链接的脚本：
这里有一个链接到代码笔中的工作版本：https://codepen.io/dan-anderton-the-sasster/pen/vYgWdER
这不是一个答案，更多的是一个建议。但是在本地主机环境中，您是否也包含了代码笔示例中使用的必要文件？IE：jquery？
我无法从你提供的例子中判断出来，但代码笔的链接会很有用。
尝试-你可能需要稍微调整一下以适应你的html，因为我无法查看这个：
var btns = document.getElementsByClassName("btn-filter");
var i;
for (i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
this.classList.toggle("activated");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
发现我的代码和引导程序之间的活动标记存在CSS冲突。更改要应用于当前按钮的类解决了问题。因此，在这种情况下，将其从活动过滤器更改为活动过滤器，然后相应地设置样式。
谢谢大家帮我看。
非常相似的问题。不知道为什么这样做有效，但有人告诉我看看Codepen上的设置，我注意到它正在将这个样式表添加到项目中：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
因此，我将其添加到我的<head>中，javascript立即工作。奇怪的