0

jsfiddle

「現在の」ナビゲーションタブのスタイルを設定しようとしています。また、jQueryにホバースクリプトがあり、これを行うのが困難になっています。

<ul class="nav">
    <li class="nav1" id="current"><a href="#">Images</a></li>
    <li><span>.</span></li>
    <li class="nav2"><a href="#">Articles</a></li>
    <li><span>.</span></li>
    <li class="nav3"><a href="#">Links</a></li>
    <li><span>.</span></li>
    <li class="nav4"><a href="#">Contact</a></li>
</ul>

//This bit does not work as expected. -->
$(".nav li a").click(function(){

    $("li#current").removeAttr('id');
    $(this).parent().attr("id","current");

});

基本的に、最初のliアンカーから他のliアンカーがクリックされた方にIDを移動し、この新しく配置されたIDをホバースクリプトで認識させる必要があります。

たとえば、[記事]をクリックすると、[画像]が青色で消え、[記事]が青色で表示され、マウスを動かすと表示されたままになります。

誰もがこれを行う方法を知っていますか？

4

3 に答える 3

1

currentより良い方法は、選択したアイテムにクラスを追加することです-class="nav1 current"

$(".nav li a").click(function(){
    $(this).parent().parent().find('li').removeClass('current');
    $(this).parent().addClass('current');
});

そのようなはずです...それをチェックする必要があります。

編集：はい、それは動作します。

于 2012-10-21T16:31:40.833 に答える
0

HTML内のIDまたは名前を交換するのではなく、クラスおよびその他の一時的な属性のみを交換します。そうしないと、コードが特定のアイテムにIDがあることを期待しているときに、副作用が発生します。週末に青いシャツを着ていたので、社会保障番号を変更することと考えてください。

現在のクラスをCSSに追加し、選択したものに応じて要素のオンとオフを切り替えます。

于 2012-10-21T16:24:30.503 に答える
0

フィドルを更新しました：http：//jsfiddle.net/mvNCz/17/ 基本的に、ロジックを逆にしました。IDではなくクラスを交換する必要があります。

$(".nav li a").hover(function(){
    var other = $("#" + $(this).parent().attr('id') + "x");
    other.addClass("hovered");
    $(this).mouseout(function(){
        other.removeClass("hovered");
    });
});
$(".nav li a").click(function(){
    $("li.current").removeClass('current');
    $("#" + $(this).parent().attr('id') + "x").addClass("current");
});
于 2012-10-21T16:35:31.637 に答える