1

リンク「ホーム」をクリックすると、クラスホームが変更され、別のリンクがクリックされるまでクラスホーム1にとどまるはずですが、クラスは変更されませんが、他のリンク「さようなら」をクリックすると、「ホーム」のクラスは変更されません' home1 から home に戻ると、クリックできなくなります。

phpは次のとおりです

    <title>TEST</title>
<link href="css/test.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="text/jquery-1.10.2.min.js"></script>



 <script type="text/javascript">
    $("ul.nav li").click(function(e) {
   var newclass=($(this).attr("class")+"1");
   var oldclass=($(this).attr("class"));
   alert($(this).attr("class")+"1");
   $(this).attr( "class",newclass);

 });
</script>
</head>

    <body>
        <div class=sidebar>       
                    <ul id=nav>
                        <li class="home"><a href="index.php"> Home</a></li>
                        <li class="bye"><a href="bye.php"> Bye </a></li> 
                    </ul>
         </div>
     </body> 

    </html>

CSS

body {
width:1020px;
margin:0 auto;
position:absolute;  
}

.sidebar {
    margin-left:10px;
    }
.nav {
    display:block;
    margin-top:60px;        
}

ul {
    list-style-type:none;
    }

a{
text-decoration:none;
border:none;    
}

li.home{ 
 background: $666 no-repeat;
 width:150px;
 height:65px;
    color:#fff;
}


li.bye{ 
background: $666 no-repeat;
width:150px;
 height:65px;
    color:#fff;  
}


li.home:hover {
    background: #678fef  no-repeat;
    color:#fff;


    }
li.bye:hover {
    background: #678fef  no-repeat;
    color:#fff;
    }

li.home1 {
    background: #678fef  no-repeat;
    color:#fff;
    }
li.bye1 {
    background: #678fef  no-repeat;
    color:#fff;
    }

jquery をコードに追加しましたが、まだアラート ボックスや目的の結果が表示されません。間違いを指摘してください。

あなたはそれを見ることができます

助けてください

4

2 に答える 2

1

:active-state は、リンク上でマウス ボタンを押している間だけアクティブになります。別のリンクをクリックするまでアクティブになりません。これはjQueryで行うことができます：

$('a').click(function() {
    $('a.lastClickedLink').removeClass('lastClickedLink');
    $(this).addClass('.lastClickedLink');
});

最後にクリックされたリンクにはクラス lastClickedLink があり、css を使用してスタイルを設定できますa.lastClickedLink {}。

ユーザーが後でページに戻ったときにこのクラスを持続させたい場合は、Cookie を使用する必要があります。これにはjQuery Cookieを使用します。

于 2013-07-26T09:56:13.157 に答える