選項卡式菜單欄使用Javascript或CSS

Question

我是JavaScript新手我想在菜單欄中創建選項卡式菜單欄，當用戶單擊該選項卡時，應該更改該選項卡的背面顏色，並且以前的選項卡應該爲Normal（顏色更少）。並且單擊的顏色選項卡應該更改顏色。

例子：

首頁設置用戶
是菜單選項時，對設置更應突出用戶點擊剩下的兩個是無亮點我怎麼能這樣使用Java腳本或CSS achive

我使用表和示例代碼是
「>首頁 「>用戶

Answer 1

Here's a tutorial for setting up a simple tabbed menu with CSS and HTML

Answer 2

試試這個演示：你在找什麼樣http://jsfiddle.net/bUuwK/？ （它使用jQuery的）

Answer 3

如何造型一<input type="radio">？

<form name="menubar" onsubmit="return false;"> 
    <input id="homeRadio" type="radio" name="menu" value="Home" /> 
    <label for="homeRadio">Home</label><br /> 
    <input id="settingsRadio" type="radio" name="menu" value="Settings" /> 
    <label for="settingsRadio">Settings</label><br /> 
    <input id="usersRadio" type="radio" name="menu" value="Users" /> 
    <label for="usersRadio">Users</input><br /> 
</form> 

這將是輕鬆與服務器端腳本（如PHP），或JavaScript生成的菜單，但它可以通過手，如果有必要建立。樣式代碼的CSS將如下所示。

form[name=menubar] input[type=radio][name=menu] { 
    display: none; 
} 
form[name=menubar] input[type=radio][name=menu] + label { 
    background-color: lightGrey; 
    padding: 10px; 
    border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; 
} 
form[name=menubar] input[type=radio][name=menu][checked=false] + label { 
    font-weight:bold; 
} 
form[name=menubar] input[type=radio][name=menu][checked=true] + label { 
    font-style:italic; 
} 

要訪問onclick事件，你可以使用一些JavaScript代碼，如：

<script> 
    function menuItemClicked(name) { 
     /* run some code here (the value of the element is passed as name) */ 
    } 
    for(element in document.menubar.children) { 
     document.menubar.children[element].onclick = function (element) { 
      menuItemClicked(document.menubar.clildren[element].value); 
     } 
    } 
</script>