在页面加载时创建/设置活动的默认链接，但在单击其他链接时删除活动链接

Creating/setting an active default link when page loads but removing active when others are clicked

本文关键字：链接 活动 单击 其他 删除 默认 创建 设置 加载      更新时间：2023-09-26

当我输入这个问题时，我注意到了类似的问题，但我的方法不同。我确实阅读了它们，但不是我想做的事情，但是我确实得到了一些想法。

我的页面上有三个链接（锚标签），我正在使用 JQuery 根据用户单击的链接在链接之间切换一个类。点击链接后会变为活动状态，我添加了 Cookie 以记住用户操作。

我真正想做的是设置第一个链接或链接，例如：ID 等于 1; 是默认值。我想要我用来使链接处于活动状态的相同类 （activeLink） 应用于默认值。当单击其他人时，该类将被删除，单击的链接将变为活动状态。

这就是我不知道该怎么做的。

我的页面是单页。
.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>

谢谢大家！！

将

带有 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，请参见上文。

相关文章：