Question

我是bootstrap的新手，仍然在努力熟悉我可以使用的可用类。所以，我试图建立一个侧边栏，但我不能让它只显示侧边栏上点击的菜单项的目标div。

换句话说，一次只有一个div而不是div的堆栈。

为了更好地说明，这是一个截图。

它不会替换当前的div，而只是显示div，然后将其隐藏在button点击上。每当我点击侧边栏上的菜单项时，最终会显示或隐藏div个中的一个或两个

dashboard.xhtml

<div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col-md-2 sidebar">
                    <ul class="nav nav-sidebar">
                        <li class="active"><a href="#">Dashboard <span class="sr-only">(current)</span></a></li>
                        <li><a href="#customer-div" class="btn btn-default" data-toggle="collapse">Customers</a></li>
                        <li><a href="#orders-div" class="btn btn-default" data-toggle="collapse">Orders</a></li>
                    </ul>
                    <ul class="nav nav-sidebar">
                        <li><a href="">Frames</a></li>
                        <li><a href="">Posters</a></li>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Users</a></li>
                    </ul>
                </div>



                <!-- CUSTOMER -->
                <div id="customer-div" class="well col-xs-8 collapse">
                    <h1>CUSTOMER</h1>
                </div>
                <!-- END OF CUSTOMER DIV -->

                <!-- ORDERS -->
                <div id="orders-div" class="well col-xs-8 collapse">
                    <h1>ORDERS</h1>
                </div>
                <!-- END OF ORDERS DIV -->

            </div>
        </div>

我希望一个div替换其容器上的当前div。

我很感激任何帮助。

谢谢。

Answer 1

您可以使用bootstrap nav-tabs来实现此目的。以下是示例代码：

<div class="container-fluid">
   <h2>Dynamic Pills</h2>
      <div class="row">
    <div class="col-xs-3">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
        <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
        <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
      </ul>
    </div>
    <div class="col-xs-9">
      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>HOME</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Menu 1</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>Menu 3</h3>
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

工作jsfiddle：bootstrap tabs stacked

参考：getbootstrap.com

Answer 2

Rajesh建议的是一个很好的选择。

但是如果你想在保持使用侧边栏的同时实现目标，可以通过引入一些Javascript代码来实现。例如：

/financial/dashboard

function showCustomers() {
    $('#orders-div').hide();
    $('#customer-div').show();
  }

  function showOrders() {
    $('#customer-div').hide();
    $('#orders-div').show();
  }

Answer 3

您也可以使用Bootstrap Accordion

只需将您的代码更改为这些......

<强>按钮

<li><a href="#customer-div" class="btn btn-default" data-parent="#accordion" data-toggle="collapse">Customers</a></li>
<li><a href="#orders-div" class="btn btn-default" data-parent="#accordion" data-toggle="collapse">Orders</a></li>

客户和订单div

<div class="panel-group" id="accordion">
  <!-- CUSTOMER -->
  <div class="panel panel-default">
    <div id="customer-div" class="panel-collapse collapse in well col-xs-8">
       <h1>CUSTOMER</h1>
     </div>
  </div>
  <!-- END OF CUSTOMER DIV -->

  <!-- ORDERS -->
  <div class="panel panel-default">
    <div id="orders-div" class="panel-collapse collapse well col-xs-8">
      <h1>ORDERS</h1>
    </div>
  </div>
  <!-- END OF ORDERS DIV -->
</div>

Bootstrap隐藏并显示基于单击侧边栏菜单项的div

3 个答案: