Jquery切换位移

我目前正在使用引导框架构建一个菜单，如下所示。当我点击其中一个链接时，它会将一个div从hide切换到show

<ul class="nav nav-pills">
  <li class="active"><a href="index.php">Home</a></li>
  <li><a href="#" id='createfolder'><span class="glyphicon glyphicon-plus"></span> Create a folder</a></li>
  <li><a href="#" id='addproject'><span class="glyphicon glyphicon-plus"></span> Add Project File</a></li>
  <li><a href="#" id='viewfiles'><span class="glyphicon glyphicon-eye-open"></span> View Files & Versions</a></li>
  <li><a href="#" id='find'><span class="glyphicon glyphicon-search"></span> Search Files & Versions</a></li>
</ul>

Jquery切换代码：

$(document).ready(function(){
  $("#search").hide();
  $("#find").click(function(){
    $("#search").toggle();
  });
});

<div id="search">
  <p>Some content that gets toggled back and forth</p>
</div>

$（文档）.ready（函数（）{
$（“#搜索”）.hide（）；
$（“#查找”）。单击（函数（）{
$（“#搜索”）.toggle（）；
});
});
一些可以来回切换的内容

问题是，当从一个菜单切换到另一个菜单时，我最终会产生一种附加效果，其中一个按钮将保持打开状态，而另一个按钮将被单击，如图所示

我想出了一个快速修复方法，包括：

---

有没有更好的方法来解决这个问题？我试图做到，当一个按钮被点击时，另一个按钮会隐藏它的内容，反之亦然。这样，如果点击任何一个按钮，可见内容就会被隐藏。

你的代码笔示例中的逻辑要复杂得多。只需单击一个按钮，即可执行

hide（）

一个div和

show（）

另一个div：

$("#add,#all").hide();

$("#addanime").click(function() {
    $("#all").hide();
    $("#add").show();
});

$("#viewall").click(function() {
    $("#all").show();
    $("#add").hide();
});

---

我是否有办法一次遍历所有div并切换它们，而不是单独隐藏每个div。