0

我有一个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>
4

3 回答 3

2

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

但是，也许，您想更改页面，将活动课程保留在您的 li。在这种情况下，您必须使用的不是 jquery 而是 php。

于 2013-07-17T09:35:44.530 回答
1

工作演示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');
        }
    });
});
于 2013-07-17T09:37:28.977 回答
0

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>父级<li>，并且$(this).parent().find('li.active')只会在被点击<li>的class="active"元素内找到元素。而您想从.li.active<ul>

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

于 2013-07-17T09:44:09.333 回答