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

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 に答える