Question

我是Javascript的新手我想在菜单栏中创建选项卡式菜单栏，当用户点击选项卡时，它应该更改该选项卡的背景颜色，之前的选项卡应该变为正常（颜色较少）。点击颜色标签应该改变颜色。

示例：

主页设置用户
当用户点击它应该突出显示的设置时是菜单选项，剩下的两个是非突出显示我如何使用java脚本或CSS实现此目的

我正在使用Table和示例代码
“＆GT; 主 “＆GT;的用户

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>

选项卡式菜单栏使用Javascript或CSS

3 个答案: