如何在每個html頁面中重複左側菜單欄

var navigation = new Array(); // This is for the navigation. 
// ==================== Navigation ==================== // 
navigation[0] = '<div id="menu">'; 
navigation[1] = '<ul>'; 
navigation[2] = '<li><a href="../about_us.htm">aboutus</a></li>'; 
navigation[3] = '</ul>'; 
navigation[4] = '</div><!-- Close TAB NAVIGATION -->'; 

function show(i) 
{ 
    for (x in i) 
    { 
     document.write(i[x] + '\n') 
    } 
}

我已經在JavaScript中爲菜單欄創建了上述功能，現在我需要在我的html文件中調用這個菜單欄。如何在每個html頁面中重複左側菜單欄

來源

2017-04-07 surabhi sanduja

我是新來的Java腳本，以便我想現在如何我可以在HTML頁面中使用這個腳本 –

我會建議您使用document.createElement而不是使用文檔寫入和一個字符串數組。

其次，我會建議使用[]文字初始化您的陣列，而不是使用Array構造。
因此，像這樣：

var arr = [1,2,3]; //like this 
var arr2 = new Array(1,2,3,4); // not recommended

下面的代碼應該爲你希望做什麼工作。

var navigation = document.createElement('div'); 
navigation.id = 'menu'; 
navigation.innerHTML = '<ul><li>' + 
    '<li><a href="../about_us.htm">aboutus</a></li>' + '</ul></li>'; 
document.body.appendChild(navigation);

有幾個方法，你可以從你的HTML調用此：

包裝這在<script></script>標籤頁面的底部
放在一個功能的設置它call onload
在html中添加一些其他觸發器。

就我個人而言，我會建議把它放在一個函數中，並將其添加到onLoad事件。

的Javascript：

window.onload = appendNavigation; 
function appendNavigation() { 
    var navigation = document.createElement('div'); 
    navigation.id = 'menu'; 
    navigation.innerHTML = '<ul><li>' + 
    '<li><a href="../about_us.htm">aboutus</a></li>' + '</ul></li>'; 
    document.body.appendChild(navigation); 
}

HTML：

<!doctype html> 
<html> 
<head>...</head> 
<body> 
    <script src="/script.js"></script> 
</body> 
</html>

如果你想工作的例子看這個的jsfiddle：https://jsfiddle.net/d1r43w33/

雖然你應該知道的jsfiddle外使用，您必須在html中包含腳本鏈接。

來源

2017-04-07 10:04:36

我是新來的Java腳本，所以我想現在我怎麼可以使用這個腳本在HTML頁面 –

@surabhisanduja我已經添加了一個例子回答你可以嘗試看看。 –

感謝您的及時響應..我已經打電話給這樣的js –

喬納斯的變體看起來不錯，但我會做這樣的：

//Autorun 
 
    $(document).ready(function() { 
 
     appendNavigation(); 
 
    }); 
 
    
 
//Function 
 
function appendNavigation() { 
 
    var navigation = document.createElement('div'); 
 
    navigation.id = 'menu'; 
 
    navigation.innerHTML = '<ul><li>' 
 
           + 
 
         '<a href="#">About Us</a>'//Replace # with the your url 
 
           + 
 
         '</li></ul>'; 
 
    document.body.appendChild(navigation); 
 
}

<!doctype html> 
 
<html> 
 
<head>...</head> 
 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="/script.js"></script> 
 
</body> 
 
</html>

又一個startfunction運行/顯示您的

來源

2017-04-07 10:33:30

你應該聲明這需要jquery，因爲他可能不知道這一點。 –

該死的，你的權利：D –

回答

相關問題