Javascript 在Bootstrap3中，在按钮上单击“显示一个div，隐藏另一个div”

我有两个div。单击按钮时，我需要第一个div（topnanav）消失，并由第二个div（topnav）替换。现在我有了它，所以第二个div在点击按钮时出现，但我不能让第一个div同时消失。第一个div是一些带有按钮的文本，第二个div是我们网站的导航栏

HTML:

<div id="topNOnav" style="background-color:#0568ae" class="collapse in">
    <div class="container">
        <div class="row">
            <div class="col-xs-3" style="padding-left:30px">
                <img src="../../images/NewNav/nav1.jpg" class="img-responsive"/>
            </div><!--end col-xs-3-->
            <div class="col-xs-6" style="text-align:center;font-family:OmnesATTIIMedium;color:white;font-size:18px;margin-top:2%">
                Take yourself to the next level!<br><i>1,000 courses to take you there.</i>
            </div><!--end col-xs-6-->
            <div class="col-xs-3" style="margin-top:2%">
                <button type="button" class="btn btn-primary" data-toggle="collapse" href="#topnav" data-toggle="collapse in">Browse Courses</button>
            </div><!--end col-xs-3-->
        </div><!--end row-->
    </div><!--end container-->
  </div><!--end topNOnav-->


  <div id="topnav" class="collapse">
       <cfinclude template="../../Navigation/Responsive/NDHeader.cfm"/>
  </div>

把你自己带到下一个层次<1000道菜带你去那里。
浏览课程

使用

数据父项

属性并将div包装在

面板中

<div id="parent">
    <div class="panel">
      <div id="topNOnav" style="background-color:#0568ae" class="collapse in">
        ...
      </div>
      <div id="topnav" class="collapse">
        ...
      </div>
  </div>
</div>

...
...

---

你可以试试这样的东西

确保将jquery添加到项目中

$（文档）.ready（函数（）{
$（“#topNOnav”）.show（）；
$（“#topnav”）.hide（）；
});
$（“#某些#按钮_id”）。单击（函数（）{
$（“#topNOnav”）.hide（）；
$（“#topnav”）.show（）；
});

把你自己带到下一个层次<1000道菜带你去那里。
浏览课程
发布您正在使用的JS。请发布您已经尝试过的javascript。