Question

So…my problem is easy, but for me is too high. I have a jquery tabs script and I would like to expand with cookie, but not working.

How to proceed? Thanks

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');
    });

other script:

$("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) );
});

And 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>

Answer 1

This might be the problem:

• ID of div element: “A”
• HREF of anchor element: “#A”

The selector you concatenate for jQuery with

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

looks like this:

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

A solution might be an HREF attribute like “A” or use the ALT attribute instead. Although using the ALT attribute should be considered a hack. 🙂

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

or

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

Just as a side node: jQuery selectors use “#” when they refer to the ID of an HTML element. Very similar to CSS.