Bootstrap基於邊欄菜單項隱藏和顯示div點擊

Question

我是新手引導，仍然試圖熟悉我可以使用的可用類。所以，我試圖建立一個側邊欄，但我不能讓它只顯示側邊欄上點擊的菜單項的目標div。

換句話說，一次div而不是div s的堆棧。

爲了更好地說明，下面是截圖。

它不會取代當前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

您可以使用引導程序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

拉傑什什麼建議是一個很好的選擇。

但是如果你想在實現你的目標的同時仍然使用側邊欄，你可以通過引入一些Javascript代碼來實現。例如：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<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" onclick="showCustomers()">Customers</a> 
 
     </li> 
 
     <li><a href="#orders-div" class="btn btn-default" onclick="showOrders()">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>

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>