0

所以...我的问题很简单，但对我来说太高了。我有一个 jquery 选项卡脚本，我想用 cookie 进行扩展，但不工作。
如何进行？谢谢

src:jquery-1.7.2.js
src:js/jquery.cookie.js

    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active");
            $(this).addClass("active");
            $(".tab_content").hide();

            var activeTab = $(this).find("a").attr("href");
            $(activeTab).fadeIn();
            return false;
    });
    $("ul.tabs li:first").css('border-left','none');
    $("ul.tabs li a:first").css('color','#232323');
    $("ul.tabs li a").click(function() {
            $(this).css('color','#232323');
            $("ul.tabs li.active a").css('color','#333');
    });

其他脚本：

$("ul.tabs a").click(function(e){
            e.preventDefault();
            $("#" + $.cookie(cookieName)).removeClass("selected");
            $.cookie(cookieName, $(this).attr("href"), cookieOptions);
            $("#" + $.cookie(cookieName)).addClass("selected");
            e.preventDefault();
            $(".tab_container").val( $.cookie(cookieName) );
});

和 HTML：

<ul class="tabs">
    <li><a href="#A"><img src="" height="41" alt="A" class="fruit" />
    <div class="fruit_name">AAA</div>
    </a></li>
    <li><a href="#B"><img src="" width="79" height="41" alt="B" class="fruit" />
    <div class="fruit_name">BBB</div>
    </a></li>
    <li><a href="#C"><img src="" width="80" height="41" alt="C" class="fruit" />
    <div class="fruit_name">CCC</div>
    </a></li>
</ul>

<div class="tab_container">
    <div id="A" class="tab_content">
         This is AAA content.
    </div>
</div>
<div class="tab_container">
    <div id="B" class="tab_content">
         This is BBB content.
    </div>
</div>
<div class="tab_container">
    <div id="C" class="tab_content">
         This is CCC content.
    </div>
</div>
4

1 回答 1

1

这可能是问题所在：

  • div 元素的 ID：“A”
  • 锚元素的 HREF：“#A”

您为 jQuery 连接的选择器

$("#" + $.cookie(cookieName))

看起来像这样：

"#" + "#A" = "##A"

解决方案可能是 HREF 属性，如“A”或使用 ALT 属性。虽然使用 ALT 属性应该被认为是一种 hack。:-)

<a href="A"> ... </a>

或者

<a href="#" alt="A"> ... </a>

就像一个边节点：jQuery 选择器在引用 HTML 元素的 ID 时使用“#”。与 CSS 非常相似。

于 2012-07-03T08:36:14.447 回答