Question

我有menu.php如下：

<?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>';
?>

现在我想使背景和字体颜色与我悬停列表时的颜色相同。为此，我添加了一个jQuery来添加一个名为active的类，但它不起作用！我的jquery和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;  
}

什么错了？是我的jquery错了吗？

更新：

<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>

Answer 1

不是$(this).parent().find('li.active').removeClass('active');
而是$(this).parent().parent().find('li.active').removeClass('active');

所以完整的jquery代码是：

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

但是，也许，你想要更改页面，保持活跃的课程。在这种情况下，它不是jquery而是你必须使用的PHP。

Answer 2

工作演示http://jsfiddle.net/XEy4s/

$(this).parent()为a tag，但我们需要ul tag，因此我们使用$(this).parent().parent()

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

新的jS代码

$(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');
        }
    });
});

Answer 3

jQuery是正确的，但HTML无效。它应该是：

<ul>
    <li><a href="home.php">HOME</a></li>
    <li><a href="about.php">ABOUT</a></li>
    <li><a href="works.php">WORKS</a></li>
    <li><a href="clients.php">CLIENTS</a></li>
    <li><a href="contact.php">CONTACT</a></li>
</ul>

使用您当前的HTML，$(this).parent()会选择点击<a>的{{1}}家长，而<li>只会找到$(this).parent().find('li.active') <li> 点击元素中的1}}元素。而您希望从class="active"开始查找li.active。

更改HTML将使jQuery <ul>找到父$(this).parent()，剩余的jQuery将按预期工作。

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

3 个答案: