0

この質問を入力すると、同様の質問に気づきましたが、アプローチが異なります。私はそれらを読みましたが、私がやろうとしていることはしませんでした、しかし私はいくつかのアイデアを得ました。

ページに3つのリンク（アンカータグ）があります。JQueryを使用して、ユーザーがクリックしたリンクに基づいてリンク間でクラスを切り替えています。クリックするとリンクがアクティブになり、ユーザーの操作を記憶するためにCookieを追加しました。

私が本当にやりたいのは、最初のリンクまたは次のようなリンクを設定することです。IDは1に等しい。デフォルトになります。リンクをアクティブにするために使用しているのと同じクラス（activeLink）をデフォルトに適用したいと思います。他の人がクリックされると、クラスが削除され、クリックされたリンクがアクティブになります。

それは私がどうしたらいいかわからないことです。

私のページは1ページです。
HTML：

<ul class="yeahBaby">
<li><a id="one" href="#/">Make me default</a></li>
<li><a id="two" href="#/">Example</a></li>
<li><a id="three" href="#/">Example</a></li>
</ul>

JQUERY： 

$(document).ready(function() {
    var idActive = $.cookie('cookieActive');

    if (idActive) {
        $('#'+idActive).addClass('activeLink');
    }

    $('.yeahBaby li a').click(function() {
        var id = $(this).attr('id');

        $(".yeahBaby li a").removeClass("activeLink");
        $(this).addClass("activeLink");
        $.cookie('cookieActive', id); //Save anchor id as cookie
        $.cookie('cookieActive', id, { expires: 10000}); 
    });
});

CSS：

<style type="text/css">
.activeClass{
color: #999;
}
</style>

みんな、ありがとう！！

4

1 に答える 1

1

id="one"HTMLでデフォルトとしてのリンクを設定します。

<ul class="yeahBaby">
    <li><a id="one" href="#/">Make me default</a></li>
    <li><a id="two" href="#/">Example</a></li>
    <li><a id="three" href="#/">Example</a></li>
</ul>​​​

次に、jQueryで：

// Upon loading the page set default .activeLink
$(window).load(function() {
    // If cookie exists
    if( $.cookie('active') !== null ) {
        // Add .activeLink to last the class in cookie
        $.cookie('active').addClass('activeLink');
    } else {
        // Else set on default
        $('#one').addClass('activeLink');
    }
});

// Bind click event to each anchor in your list
$('.yeahBaby li a').bind('click', function(e) {
    // Remove .activeLink class from current active link
    $('.activeLink').removeClass('activeLink');
    // Add .activeLink to the link just clicked
    $(this).addClass('activeLink');
    // Create cookie
    $.cookie('active', $(this));
    return false;
});​

ここで実際の動作を確認してください：JSFiddle

- アップデート -

jQuery $ .cookieプラグインを使用した追加のCookieについては、上記を参照してください。

于 2012-08-08T03:51:19.833 に答える