dow72046 2013-07-17 09:31
浏览 24
已采纳

使当前活动的菜单不起作用

I have a menu.php as below :

<?php $menu = 
'<div id="menu">
    <ul>
        <a href="home.php"><li>HOME</li></a>
        <a href="about.php"><li>ABOUT</li></a>
        <a href="works.php"><li>WORKS</li></a>
        <a href="clients.php"><li>CLIENTS</li></a>
        <a href="contact.php"><li>CONTACT</li></a>
    </ul>    
</div>';
?>

Now I want to make the background and font color same as when I hover the list. For this I have added a jQuery to add a class called active, but its not working ! My jquery and CSS:

$(document).ready(function() {
    $('#menu ul li').click(function(){
    //alert('Active');
        $(this).parent().find('li.active').removeClass('active');
            $(this).addClass('active');
    });
});

CSS :

#menu li:hover
{
    background:#ffca00;
    color:#2e2f34;
    padding:16px 12px;

}
#menu li.active
{
    background:#ffca00;
    color:#2e2f34;
    padding:16px 12px;  
}

Whats wrong ? is my jquery is wrong?

UPDATE:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(document).ready(function () {
    $('#menu ul li').click(function () {
        $(this).parent().parent().find('.active').removeClass('active');
        a//lert(this);
        $('#menu ul li').addClass('active');
    });
});
</script>

<style>
#menu
{
    width:450px;
    margin-left:400px;
    background:#000;
}
#menu ul
{
    padding:18px;   
}
#menu li{ 
    display:inline; 
    list-style:none; 
    padding:18px 12px;
    text-transform:uppercase;
}
#menu a
{
    color:#FFF;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size:14px;
    text-decoration:none;
}
#menu li:hover {
    background:#ffca00;
    color:#2e2f34;
    padding:16px 12px;
}
.active {
    font-weight:bold;
    background:#ffca00;
    color:#2e2f34;
    padding:16px 12px;
}
</style>
</head>

<body>
<div id="menu">
    <ul> <a href="activemenu.html"><li>HOME</li></a>
         <a href="activemenu2.html"><li>ABOUT</li></a>
        <a href="activemenu3.html"><li>ABOUT</li></a>

    </ul>
</div>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • donglong2856 2013-07-17 09:37
    关注

    Working Demo http://jsfiddle.net/XEy4s/

    $(this).parent() is a tag but we need ul tag so we use $(this).parent().parent()

    $(document).ready(function () {
    $('#menu ul li').click(function () {
        $(this).parent().parent().find('.active').removeClass('active');
        $(this).addClass('active');
    });
});

    New jS code

    $(document).ready(function () {
    loc = $(location).attr('href');
    var n = loc.split("/");
    var n1 = loc.split("/").length;
    var on_page = n[n1 - 1];
    var new_page = on_page.split("?");
    $('#menu ul a').each(function () {
        if ($(this).attr('href') == new_page[0]) {
            $(this).find('li').addClass('active');
        }
    });
});
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题！！
  • ¥15 ikuai客户端多拨vpn，重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题，如何解决？(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应
  • ¥15 matlab基于pde算法图像修复，为什么只能对示例图像有效