實現CSS Sidenav加載內容取決於表單導航選擇

我使用MaterializeCSS爲我的公司設計着陸頁。實現CSS Sidenav加載內容取決於表單導航選擇

現在我已經在左側集成了一個側邊欄和三個項目。如果一個項目被點擊，我想加載右側的特定內容。該內容可能是另一個HTML頁面或網站。

如何使用Materialize框架來做到這一點？

這裏我的html代碼：

<body> 
    <header> 
     <nav> 
      <div class="nav-wrapper"> 
       <a class="brand-logo center">Monitoring Tool</a> 
       <ul class="left hide-on-med-and-down"> 
       </ul> 
      </div> 

      <!-- Side Navigation --> 
      <ul id="slide-out" class="side-nav fixed"> 
       <li class="logo"> 
        <a class="brand-logo not-active"> 
         <object id="front-page-logo" type="image/png" data="img/logo.png"></object> 
        </a></li> 
       <p class="divider" id="logo-divider"></p> 
       <li class="bold"><a id="nagios">Nagios</a></li> 
       <li class="bold"><a id="munin">Munin</a></li> 
       <li class="bold"><a id="usv-monitor">USV-Monitor</a></li> 
      </ul> 
     </nav>  
    </header> 

    <main> 
      <iframe width="100%" height="100%" frameborder="0" allowfullscreen id="iframe"></iframe> 
    </main> 

    <footer class="page-footer"> 
    </footer> 
    <!-- Scripts--> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="js/materialize.js"></script> 
    <script src="js/init.js"></script> 

</body>

非常感謝！

來源

2017-04-13 nicowi

嘗試'UI-router'您可以撥打我不知道每個sidenav菜單 – rachmatsasongko

不同觀點的內容，而不是'UI-router'只有一個元素角？ – nicowi

對不起，我以爲你在用角材料。在這種情況下，您可以使用jquery ajax並使sidenav菜單加載onclick內容，並在正確的頁面內容中顯示ajax結果。 – rachmatsasongko

我錯過了什麼嗎？只需使用a元素的href和target屬性。就像這樣：

<a id="nagios" href="http://path/to/nagios/" target="iframe">Nagios</a></li> 
<a id="munin" href="http://path/to/munin/" target="iframe">Munin</a></li> 
<a id="usv-monitor" href="http://path/to/usv-monitor/" target="iframe">USV-Monitor</a></li> 

<iframe width="100%" height="100%" frameborder="0" allowfullscreen id="iframe" name="iframe"></iframe>

來源

2017-04-19 14:42:48

實現CSS Sidenav加載內容取決於表單導航選擇

回答

相關問題