在使用HTML制作網頁時，經常需要在頁面上添加左側導航欄。為了方便用戶瀏覽，我們可以使用JavaScript來實現導航欄的交互效果。下面是一個簡單的示例代碼：

<script>
window.onload = function() {
var navList = document.getElementById("nav-list");
var navItems = navList.getElementsByTagName("li");
for (var i = 0; i< navItems.length; i++) {
navItems[i].onclick = function() {
for (var j = 0; j< navItems.length; j++) {
navItems[j].className = "";
}
this.className = "active";
}
}
};
</script>

在這個代碼中，我們首先利用JavaScript的window.onload事件，當頁面加載完畢時執行下面的代碼。接下來，我們通過getElementById()方法獲取導航欄的

元素，并通過getElementsByTagName()方法獲取所有的
• 元素。接著，我們對每個
• 元素都添加了一個onclick事件，即用戶點擊其中一個導航項時執行某些操作。

  在每次點擊時，我們首先清除所有

• 元素的樣式類名，即className屬性為空。接著，我們為當前點擊的元素添加了一個名為“active”的樣式類名，使用戶能夠清楚看到當前正在瀏覽的頁面。

  以上就是這個簡單的導航欄JavaScript代碼的工作原理，我們可以根據實際需要進行修改和擴展。需要注意的是，在實際應用中可能需要用到jQuery等開源庫來簡化代碼。