html、css、javascript-show/hide divs-一个显示，另一个应该隐藏

我想创建显示/隐藏分区。 这是我的代码：jsfiddle.net/b60b34h1

但它不像我想要的那样工作。 我希望当按下“按下按钮2”时，另一个div应该隐藏起来。 它应该只显示一个div

你能帮我吗？

---

谢谢

你可以试试这个方法

function unhide(divID) {
    var item = document.getElementById(divID);
    var openDiv = document.getElementsByClassName("unhidden");
    if(openDiv[0]!=undefined){
          openDiv[0].className = 'hidden';
    }

    if (item) {
      item.className='unhidden';
    }
  }

请查找工作片段

函数取消隐藏（divID，currentLink）{
var activeLink=document.getElementsByClassName（“厚”）；
如果（activeLink[0]！=未定义）{
activeLink[0]。类名='btn btn line black'；
}
var currentLink=document.getElementById（currentLink）；
currentLink.className='粗btn btn线黑色'；
var item=document.getElementById（divID）；
var openDiv=document.getElementsByClassName（“unhidden”）；
if（openDiv[0]！=未定义）{
openDiv[0]。类名='隐藏'；
}
如果（项目）{
item.className=（item.className='hidden'）？'unhidden'：'hidden'；
}
}

.hidden{display:none；}
.unhidden{display:block；}
.厚{
字体大小：粗体；
颜色：红色！重要；
}
a:以后{
字体大小：粗体；
}
.btn{
颜色：绿色；
}
.btn线路黑色{
边框：1px纯绿色；
}

按钮1

abc
abc
abc

按钮2

abc
abc
abc

按钮3

abc
abc
abc

所以您想隐藏显示的div…
然后显示与传递的id对应的div，对吗

可以这样写：

函数取消隐藏（divID）{
document.getElementsByClassName（'unhidden'）[0].className=“hidden”；
document.getElementById（divID）.className=“unhidden”；
}

.hidden{display:none；}
.unhidden{display:block；}

按钮1

abc
abc
abc

按钮2

abc
abc
abc

按钮3

abc
abc
abc

函数取消隐藏（divID）{
var item=document.getElementById（'按钮'+divID）；
如果（项目）{
item.className='unhidden'；
//隐藏其他分区
对于（var i=1；我请正确更新您的问题，如果可能的话，请在其中添加代码片段以便更好地理解检查JSFIDLE链接-比其清晰-我想。P.S.对不起我的英语。当按下按钮2时，您想隐藏哪个div？所有其他div。它应该只显示一个div。当按下下一个按钮时，应该比上一个按钮时隐藏。我们无法edi直接访问您的站点。如果您获得了一种方法，尝试在您的站点中实现相同的方法，请查看更新的答案。默认情况下，您没有使用未隐藏的类提供one div。因此，您会遇到此错误“无法设置未定义的属性“className”。只需将未隐藏的类提供给button1 div即可work@online123太好了：）Cen你又帮了我一次：如何使按钮“div”的css样式处于活动状态例如：当按下按钮2时，按钮2为粗体。按下按钮3时，按钮3为粗体，按钮2为不粗体。您在第525行上有
语法错误：意外标记
。这是愚蠢的WordPress，他在空行上添加了一些
。请在
您当前使用我的解决方案之前删除空行如果你在控制台中仍然有相同的错误，它现在可以工作了。现在你的
问题已经解决了。好极了！而且你仍然使用我的解决方案…你能重新接受我的答案吗？（lol）因为，这不仅仅是为了得到要点…你现在实际上向其他读者指出了一个错误的解决方案。证据：如果你输入这个：
console.log（$(“#post-1587”）.find（“script”）.text（））；
在此网站的控制台中：您将看到我的答案。