Question

我有两个div。单击按钮时，我需要第一个div（topNOnav）消失并被第二个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>

Answer 1

使用data-parent属性并将div包装在panel ..

中

<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>

http://www.codeply.com/go/8eo6tQF0TB

Answer 2

你可以尝试这样的事情。

务必将jquery添加到您的项目中。

＆＃13;

$(document).ready(function(){
  $("#topNOnav").show();
  $("#topnav").hide();  
});

$("#some_button_id").click(function(){
  $("#topNOnav").hide();
  $("#topnav").show(); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="some_button_id" 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" style="width: 100px; height: 100px; background-color: red;"> 
       <cfinclude template="../../Navigation/Responsive/NDHeader.cfm"/>
  </div>

＆＃13;

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

2 个答案: