自舉儀表板

我是新手引導，HTML和與網頁開發有關的一切。我正在使用bootstrap構建儀表板，並且設法正確地設置了基本佈局。我的儀表板有一個頂部和側面導航欄。自舉儀表板

我現在想要在不同頁面之間導航，而不必重新加載側面和頂部導航欄。所以我只是希望頁面的中心部分加載內容，只要點擊導航欄上的鏈接並讓點擊的鏈接改變背景顏色以指示用戶當前在相應的頁面上。這是我的內容股利

<div class="section"> 
    <div class="container" id="content"> 
    </div> 
</div>

我一直在試圖谷歌一些教程，但我爭奪，以獲得相應的結果，因爲我覺得我的搜索關鍵詞是那種含糊。有什麼我可以閱讀來學習這些東西，或有任何人在這裏幫助我。

這裏是我的代碼

<body> 
    <div id="wrapper"> 
     <nav class="navbar navbar-default navbar-static-top" style="background:white"> 
     <div class="container"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"><img alt="Dijo_logo" src="https://dijoapp.co.za/dashboard_resources/logos/dijo8.png"></a> 
      </div> 
      <div class="collapse navbar-collapse" id="navbar-ex-collapse"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li class="active"> 
       <a href="#">Dashboard</a> 
       </li> 
       <li> 
       <a href="dijoapp.co.za">Admin</a> 
       </li> 
      </ul> 
      <ul class="nav navbar-top-links navbar-right"> 
       <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i> 
        </a> 
       <ul class="dropdown-menu dropdown-user"> 
        <li> 
        <a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a> 
        </li> 
        <li> 
        <a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a> 
        </li> 
        <li class="divider"></li> 
        <li> 
        <a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </nav> 
     <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="#">Statistics<span class="sr-only">(current)</span></a> 
       </li> 
       <li> 
       <a href="#">Ratings and Reviews</a> 
       </li> 
      </ul> 
      </div> 
      <div class="section"> 
      <div class="container" id="content"> 
       <div class="side-body"></div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body>

來源

2015-11-18 spongyboss

使用引導標籤功能，而不是導航。這正是你想要的。 http://getbootstrap.com/javascript/#tabs –

對於對應於哪個頁面是開放的，請在引導CSS已經描述過的「活動」類的變化背景顏色的一部分。

<li class="active"> <a href="#">Dashboard</a> </li>

正如你所看到的，含有<li>儀表板已經分配了類「活動」。在與導航欄上的鏈接相對應的每個頁面上，將該「活動」類別分配給導航欄上各自的<li>，並將其從其他<li> s中移除。

來源

2015-11-18 15:54:39

它並不完全回答你的確切問題，但會使其無關緊要，
看來你似乎是在這裏重新發明輪子。
很多在爲管理控制檯/儀表板創建了許多模板之前。

我最喜歡的是SB Admin < Link

你可以看到this site

來源

2015-11-18 16:02:22

我同意，除非你有特定的理由讓自己做，只要使用現有的 –

我想你所想實現的是一個單頁的應用程序更多的模板。

您可以創建一個導航儀表板，只改變內容區域，不用JavaScript，jQuery或AJAX重新加載頁面。

這裏是一個可以指導您完成創建SPA的文章 - （單頁應用）Create a Single Page App with jQuery

然而，一個更簡單的方法實現這一目標是使用像角JavaScript框架。

如果你是在角初學者，這篇文章可以幫助您開始使用引導程序和角 - How to Use Bootstrap 4 with Angular

來源

2017-12-07 07:13:09 Sofia

回答

相關問題