css - Bootstrap 根据单击的侧边栏菜单项隐藏和显示 div

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