Javascript can'；t在响应模式下显示/隐藏表格列

我的按钮有问题，不能用了。当点击按钮时，它应该显示另一列，并隐藏其他列以用于移动视图。我用JavaScript尝试了它，并添加了

onclick

函数，但它没有显示其他列。例如，当点击按钮2时，它应该隐藏第二列、第四列、第五列和第三列

在代码中，您将看到我使用了

javascript

和

css

，但都不起作用

函数myFun（）{
document.getElementsByClassName（“第二列”）.style.display=“block”；
document.getElementsByClassName（“第三列”）.style.display=“无”；
document.getElementsByClassName（“第四列”）.style.display=“无”；
document.getElementsByClassName（“第五列”）.style.display=“无”；
}
函数myFunc（）{
document.getElementsByClassName（“第二列”）.style.display=“无”；
document.getElementsByClassName（“第三列”）.style.display=“block”；
document.getElementsByClassName（“第四列”）.style.display=“无”；
document.getElementsByClassName（“第五列”）.style.display=“无”；
}
函数myFunct（）{
document.getElementsByClassName（“第二列”）.style.display=“无”；
document.getElementsByClassName（“第三列”）.style.display=“无”；
document.getElementsByClassName（“第四列”）.style.display=“block”；
document.getElementsByClassName（“第五列”）.style.display=“无”；
}
函数myFuncti（）{
document.getElementsByClassName（“第二列”）.style.display=“无”；
document.getElementsByClassName（“第三列”）.style.display=“无”；
document.getElementsByClassName（“第四列”）.style.display=“无”；
document.getElementsByClassName（“第五列”）.style.display=“block”；
}

@介质和所有（最大宽度：900px）{
.桌子{
宽度：100%；
}
.第二栏{
宽度：50%；
}
.空间{
显示：无；
}
.第三栏{
显示：无；
}
.第四栏{
显示：无；
}
.第五栏{
显示：无；
}
.固定{
表布局：固定；
}
td：第一个孩子{
宽度：50%；
}
.btn分区{
显示：块！重要；
}
#btn-1：焦点~第二列{
显示：块！重要；
}
#btn-1:focus~。第三栏，
.第四栏，
.第五栏{
显示：无！重要；
}
#btn-2：焦点~第三栏{
显示：块！重要；
}
#btn-2:focus~。第二列，
.第四栏，
.第五栏{
显示：无！重要；
}
#btn-3：焦点~第四列{
显示：块！重要；
}
#btn-3:focus~。第二列，
.第三栏，
.第五栏{
显示：无！重要；
}
#btn-4：焦点~第五栏{
显示：块！重要；
}
#btn-4:focus~。第二列，
.第三栏，
.第四栏{
显示：无！重要；
}
}

111
222
333
444
!
1.
2.
3.
4.
%
1.
2.
3.
4.
$
1.
2.
3.
4.
@
1.
2.
3.
4.
#
1.
2.
3.
4.
$$ 
1.
2.
3.
4.
1.
2.
3.
4.

我知道这个问题。使用

getElementsByClassName（）

时，它返回html集合。所以它结合了节点列表中的所有元素，所以如果我想访问某个元素，我应该使用该元素的索引号。 例如：

document.getElementsByClassName('second-column')[0].style.display="none";

但是如果您想更改或访问所有元素，那么应该使用循环

这就解决了我的问题：

function myFun(){
        
        [...document.getElementsByClassName("second-column")].forEach(e => e.style.display = "table-cell");
        [...document.getElementsByClassName("third-column")].forEach(e => e.style.display = "none");
        [...document.getElementsByClassName("forth-column")].forEach(e => e.style.display = "none");
        [...document.getElementsByClassName("fifth-column")].forEach(e => e.style.display = "none");
        
    }

或者这样：

var x = document.getElementsByClassName('third-column');
for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}

var x=document.getElementsByClassName（'third-column'）；
对于（变量i=0；i

---

并对每个类名重复它

请共享您的Javascript。@kmoser我添加了Javascript代码。以前我使用css。两者都不适用于我

getElementsByClassName（）

返回一个而不是一个DOM元素。你必须这么做。