javascript通过按钮切换div样式显示

嘿，我想知道是否有人能帮我弄明白为什么我的函数按类名更改样式显示不起作用，它适用于ID为的函数，但不适用于使用类

还想知道我是否可以只使用javascript将按钮类onclick从btn red更改为btn green

window.toggleDisplayByID=函数（id）{
var e=document.getElementById（id）；
如果（e.style.display==null | | e.style.display==“无”）{
e、 style.display=“block”；
}否则{
e、 style.display=“无”；
}
}
window.toggleDisplayByClass=函数（类名）{
var c=document.getElementsByClassName（className）；
如果（c.style.display==null | | c.style.display==“无”）{
c、 style.display=“block”；
}否则{
c、 style.display=“无”；
}
}

.btn{
显示：内联块；
高度：40px；
线高：40px；
填充：0 20px；
背景：#444；
颜色：#eee；
边界：0；
字体大小：14px；
垂直对齐：顶部；
文本对齐：居中；
文字装饰：无；
文本阴影：0 1px 0 rgba（0,0,0,0.4）；
盒影：0 2px 10px rgba（0,0,0,0.2）；
边界半径：4px；
过渡：所有0.15秒缓进缓出；
}
.btn:悬停，
.btn：活动{
背景色：#555；
颜色：#fff；
}
.btn绿色{
背景色：#47950d；
}
.btn绿色：悬停，
.btn绿色：活动{
背景色：#64b820；
}
.btn红色{
背景色：#b3353c；
}
.btn红色：悬停，
.btn红色：活动{
背景色：#cb575b；
}

切换div 1
切换第2部分
切换第3部分
切换第4部分

这里有些东西


这里有些东西2


这里有些东西


这里有些东西

返回类似数组的对象，因此必须对其进行索引

window.toggleDisplayByID = function(id) {
  var e = document.getElementById(id);
  if (e.style.display == null || e.style.display == "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
}

window.toggleDisplayByClass = function(className) {
  var c = document.getElementsByClassName(className);
  c.forEach(function(x) {
      if (x.style.display == null || x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
}

返回一个类似数组的对象，因此必须对其进行索引

window.toggleDisplayByID = function(id) {
  var e = document.getElementById(id);
  if (e.style.display == null || e.style.display == "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
}

window.toggleDisplayByClass = function(className) {
  var c = document.getElementsByClassName(className);
  c.forEach(function(x) {
      if (x.style.display == null || x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
}

---

至于你的第一个问题，它不起作用，因为

getElementsByClassName

返回一个元素数组，所以你必须迭代它们。

至于你的第一个问题，它不起作用，因为

getElementsByClassName

返回一个元素数组，所以你必须迭代它们。

有两件事：

• 第四个元素的类名在HTML中不正确
• 第二个函数中有一个未定义的变量

当您

getElementsByCassName（）

时，您没有处理单个元素。循环浏览列表并设置您的样式

我更改了toggleDisplayById和toggleDisplayByClass参数，以便它可以包含按钮的元素id。在这些函数中，它们通过以下方式获得按钮元素：

var b = document.getElementById(btnId);

此外，我还创建了一个助手函数，用于删除和添加样式：

function removeAndAddClass(element,removeClass,addClass){
    element.classList.remove(removeClass);
    element.classList.add(addClass);
 }

window.toggleDisplayByID=函数（btnId，id）{
var e=document.getElementById（id）；
var b=document.getElementById（btnId）；
如果（e.style.display==null | | e.style.display==“无”）{
e、 style.display=“block”；
去除标准等级（b，'btn-绿色'，'btn-红色'）；
}否则{
e、 style.display=“无”；
删除标准等级（b、'btn-red'、'btn-green'）；
}
}
window.toggleDisplayByClass=函数（btnId，类名）{
var c2=Array.from（document.getElementsByClassName（className））；
var b=document.getElementById（btnId）；
如果（b.classList.contains（'btn-red'））{
删除标准等级（b、'btn-red'、'btn-green'）；
}否则{
去除标准等级（b，'btn-绿色'，'btn-红色'）；
}
c2.forEach（c=>{
如果（c.style.display==null | | c.style.display==“无”）{
c、 style.display=“block”；
}否则{
c、 style.display=“无”；
}
});
}
函数RemoveAnddClass（元素、removeClass、addClass）{
element.classList.remove（removeClass）；
element.classList.add（addClass）；
}

.btn{
显示：内联块；
高度：40px；
线高：40px；
填充：0 20px；
背景：#444；
颜色：#eee；
边界：0；
字体大小：14px；
垂直对齐：顶部；
文本对齐：居中；
文字装饰：无；
文本阴影：0 1px 0 rgba（0,0,0,0.4）；
盒影：0 2px 10px rgba（0,0,0,0.2）；
边界半径：4px；
过渡：所有0.15秒缓进缓出；
}
.btn:悬停，
.btn：活动{
背景色：#555；
颜色：#fff；
}
.btn绿色{
背景色：#47950d；
}
.btn绿色：悬停，
.btn绿色：活动{
背景色：#64b820；
}
.btn红色{
背景色：#b3353c；
}
.btn红色：悬停，
.btn红色：活动{
背景色：#cb575b；
}

切换div 1
切换第2部分
切换第3部分
切换第4部分

这里有些东西


这里有些东西2


这里有些东西


这里有些东西

两件事：

• 第四个元素的类名在HTML中不正确
• 第二个函数中有一个未定义的变量

当您

getElementsByCassName（）

时，您没有处理单个元素。循环浏览列表并设置您的样式

我更改了toggleDisplayById和toggleDisplayByClass参数，以便它可以包含按钮的元素id。在这些函数中，它们通过以下方式获得按钮元素：

var b = document.getElementById(btnId);

此外，我还创建了一个助手函数，用于删除和添加样式：

function removeAndAddClass(element,removeClass,addClass){
    element.classList.remove(removeClass);
    element.classList.add(addClass);
 }

window.toggleDisplayByID=函数（btnId，id）{
var e=document.getElementById（id）；
var b=document.getElementById（btnId）；
如果（e.style.display==null | | e.style.display==“无”）{
e、 style.display=“block”；
去除标准等级（b，'btn-绿色'，'btn-红色'）；
}否则{
e、 style.display=“无”；
删除标准等级（b、'btn-red'、'btn-green'）；
}
}