更改所选菜单选项卡的颜色 - Change the color of selected menu tab

Change the color of selected menu tab

本文关键字：颜色选项菜单 | 更新日期: 2023-09-27

如何在代码菜单中进行更改，以便在单击后更改所选菜单选项卡的颜色？这是我的代码：

.php

<div class="meniu-item" onclick="$('#content').load('_core/home.php?rand='+Math.random()); window.location.hash = 'home';   ">Home</div>
<div class="meniu-item" onclick="$('#content').load('_core/after-login.php?what=help&rand='+Math.random()); window.location.hash = 'help';  ">Contact</div>

.css

.meniu-item {
    display:block;
    float:left;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fdfdfd), color-stop(1, #f1f1f2) );
    background:-moz-linear-gradient( center top, #fdfdfd 5%, #f1f1f2 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#f1f1f2');
    background-color:#fdfdfd;
    border-right:1px solid #e0e0e0;
    color:#333333;
    font-family:Verdana;
    font-size:10px;
    font-weight:bold;
    padding:4px 0 0 0;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
    cursor:pointer;
    height:25px;
    color:#4d4d4d;
    width: 97px;
    text-align:center;
    margin-top: 6px;
    line-height: 2;
}

例：

http://www.codeproject.com/KB/webforms/MenuControlSelectedItem1/EndProduct1.JPG

像这样：

<div data-uri="_core/home.php" class="meniu-item">Home</div>
<div data-uri="_core/after-login.php" class="meniu-item">Contact</div>

使用 jQuery：

$("div.meniu-item").on("click", function()
{
    $('#content').load($(this).data("uri"));
    window.location.hash = $(this).text().toLowerCase();
    // Remove the class 'selected' from all navigation items first.
    $("div.meniu-item").removeClass("selected");
    // Then add it to the one we clicked.
    $(this).addClass("selected");
});