在沒有服務器的情況下重新使用導航

我正在使用我的計算機上的第一個網站，並且我不打算將其放到Internet上。但是，我想在其他頁面上重複使用導航和頁腳。在沒有服務器的情況下重新使用導航

沒有PHP。沒有框架。 Javascript？有沒有反正使用HTML？

來源

2012-11-18 skyneon

[純HTML + JavaScript客戶端模板]（http：// stackoverflow。COM /問題/ 4073375 /純HTML的JavaScript的客戶端 - 模板） –

爲什麼不安裝MAMP/WAMP/LAMP（適用於Mac，Windows或Linux），只使用PHP，你可能會需要它反正在某些時候？（即是你避免PHP，因爲它是「硬」還是因爲你已經決定你想以不同的方式做到這一點） –

我只是工作在我的網站上以供離線使用。所以我想重用導航儘可能簡單。 – skyneon

Modest會這樣做。

這是特別容易，如果你不把它在互聯網上，只要把jQuery和modest-preview.js的部分，就可以開始使用它的時候了：

main.xhtml

<?xml version='1.0' encoding='UTF-8'?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="modest-preview.js"></script> 
    <include>myNav</include> 
    </head> 
    <body> 
    <myNav/> 
    </body> 
</html>

myNav.xml HTML | CSS | JavaScript | jQuery

來源

2013-09-06 03:28:15 GoalBased

我知道是有點老，但我找到了一種方法來實現這一點。

您可以使用ajax將一部分代碼加載到yout html中，並保留頁面的其餘部分而不更改以使用相同的導航。

代碼：

可以說我有這個代碼在這個文件中：

home.html的

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title></title> 
 
    <link href="thirdParty/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="css/site.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#/">NAVBAR</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class=" active"> 
 
        <a href="#/">Home</a> 
 
       </li> 
 
       <li> 
 
        <a href="#/about">About</a> 
 
       </li> 
 
       <li> 
 
        <a href="#about">Rebout</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <main id="main"> 
 
    </main> 
 
    <script src="thirdParty/jquery-1.12.0.min.js"></script> 
 
    <script src="thirdParty/jquery.ba-hashchange.min.js"></script> 
 
    <script src="js/partialViewLoad.js"></script> 
 
    <script src="thirdParty/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

我會有另外兩個文件這將作爲htmls局部視圖s：'partialViews/main.html'和'partialViews/about.html'。（把這些文件中的一些html）

我使用插件jquery.ba-hashchange.min刷新html。

而且至少我已經使用加載的局部視圖的腳本：

loadPartialView.js

$(function() { 
 
    $(window).hashchange(function() { 
 
     if (location.hash.indexOf('#/') > -1) { 
 
      loadPartial(location.hash.substr(location.hash.lastIndexOf('/') + 1)); 
 
     } 
 
    }); 
 
    $(window).hashchange(); 
 
}); 
 

 
function loadPartial(partialName) { 
 
    partialName = partialName || 'main'; 
 
    $.get('/partialViews/' + partialName + '.html').done(function (html) { 
 
     $('#main').html(html); 
 
    }); 
 
} 
 

 
$(document).ready(function() { loadPartial(); });

當你點擊的鏈接ul哈希位置會改變，這將觸發我們創建的jquery回調。在那一刻我們加載了我們的部分視圖。

我建議您使用服務器和更健壯的語言來完成此操作。但是這個解決方案可以工作，很容易實現，甚至可以在服務器上運行。

來源

2016-01-11 06:47:01 tavo

在沒有服務器的情況下重新使用導航

回答

相關問題