1

同じページのコンテンツにリンクするメニューがあり、jQueryを介してdivをフェードインおよびフェードアウトし、完全に機能します。

ナビゲーションの最初のリンクにはクラス（current_page_item）がアタッチされており、ナビゲーションの他のリンクをクリックすると、そのクラスを削除して、クリックしたリンクに追加したいと思います。

これまでのところ、私は次のようなことを試しました：

$(function() {
    $("#nav-links a").click(function(){
        $("#nav-links ul li").removeClass("current_page_item").find("li:last a").addClass("current_page_item");
        });
    });

これは機能しません。

私はjavascriptに非常に慣れていないので、助けていただければ幸いです。

ありがとう！

編集：

ナビゲーションのHTMLは次のとおりです。

            <div id="nav-wrap">

                <ul class="group" id="nav-links">
                    <li class="current_page_item"><a href="#recent" class="linkclass recent">RECENT</a></li>
                    <li><a href="#work" class="linkclass work">WORK</a></li>
                    <li><a href="#who" class="linkclass who">WHO</a></li>
                    <li><a href="#services" class="linkclass services">SERVICES</a></li>
                    <li><a href="#contact" class="linkclass contact">CONTACT</a></li>
                </ul>

            </div>

編集2：

以下の答えを使用しても、それでも私が望むものを達成していないようです。おそらく、私が使用しているjQueryプラグイン（マジックライン）が原因です。リンク

したがって、基本的には、「行」をクリックされたものの下に配置したいと思います。これは、「current_page_item」が適切な場所にある新しいページをロードする場合に機能しますが、DIVをフェードインおよびフェードアウトしているため、それを行うことはできません。

行は、'current_page_item'クラスのliアイテムに戻ります。おそらく、このコードを変更して、クリックした要素にクラスを追加することができますか？

これがコードです。

    $(function() {

        var $el, leftPos, newWidth,
            $mainNav = $("#nav-links");

        $mainNav.append("<li id='magic-line'></li>");
        var $magicLine = $("#magic-line");

        $magicLine
            .width($(".current_page_item").width())
            .css("left", $(".current_page_item a").position().left)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());

        $("#nav-links li a").hover(function() {
            $el = $(this);
            leftPos = $el.position().left;
            newWidth = $el.parent().width();
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }, function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        });
    });
4

4 に答える 4

2

クリックした要素に到達し$(this)、その親li要素にアクセスしてクラスparent()を追加できます。以下は最終的なコードで、ここcurrent_page_itemで実際の例を見つけることができます。

$(function() {
    var $el, leftPos, newWidth,
        $mainNav = $("#nav-links");

    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#nav-links li:not('#magic-line') a").hover(function() {
        $el = $(this).parent();
        leftPos = $el.position().left;
        newWidth = $el.width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    },function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    }).click(function() {
         $mainNav.find('li').removeClass('current_page_item');
         $(this).parent().addClass('current_page_item');
         $magicLine
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());
    });
});
于 2011-10-22T12:53:49.703 に答える
0 
$(function() {
    $("#nav-links a").click(function(){
        $("#nav-links li").removeClass("current_page_item").closest("ul").find("li:last a").addClass("current_page_item");
        });
    });

.find() は、子孫要素のみを検索します。探している要素の兄弟である li に対して .find を実行しています。

于 2011-10-22T12:49:45.747 に答える
0 
$(function() {
    $("#nav-links a").click(function(){
 var B = $(this);
$("#nav-links ul li").removeClass("current_page_item");
B.addClass("current_page_item");
        });
    });

これを試して

于 2011-10-22T12:57:56.480 に答える
0
  1. nav-linksis a ulsoは、ウィッチ内の$("#nav-links ul li")すべての sが の子孫であり、明らかに存在しないことを意味します。を使用する必要があります。liulnav-links$("#nav-links li")
  2. 他の誰もが言及したよう.findに、すべての子孫を検索しますが、それはあなたが探しているものではありません。.closest("ul")直前に使用.find

それが役に立てば幸い。

于 2011-10-22T13:07:57.413 に答える