更改所选菜单选项卡的颜色

时间:2014-04-02 01:53:33

标签: php jquery html ajax menu

如何更改我的代码菜单,以便在点击后更改所选菜单标签的颜色?这是我的代码:

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

1 个答案:

答案 0 :(得分:1)

类似的东西:

<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");

});