3

I wrote a code that whould change a li's class to active and show the correct content on click but I also would like to be able to link a visitor to example: www.socal.nu/index.php#tab2 to activate tab2.

Code:

$(document).ready(function() {

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

//On Click Event
$("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;
});

});

Edited to include the (x)html structure of the tabs list (as posted by the OP in a comment to @slightlymore's answer):

<ul class="tabs">
  <li><a href="#tab1">Hem</a></li>
  <li><a href="#tab2">Projekt</a></li>
  <li><a href="#tab3">Om SOCAL</a></li>
  <li><a href="#tab4">Kontakt</a></li>
</ul>
Community
  • 1
  • 1
Victor Bjelkholm
  • 2,177
  • 9
  • 28
  • 50

2 Answers2

3

To get the tab from the URL, do this:

var tab = window.location.hash;

Then you could trigger the click event for the li that has the a with the proper href:

var tab = window.location.hash;

    // Fire click on the <li> that has the <a> with the proper 'href' attribute
$("ul.tabs li:has(a[href=" + tab + "])").click();

Or you could reuse the function you created for the click event, and the initial page load.

  // Function that is used for click event and page load
function loadTab() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
}

  // set up Click Event
$("ul.tabs li").click( loadTab );

var tab = window.location.hash;

  // check to see if there was a tab in the location, and if
  //    so, call loadTab if from the context of the proper <li>.
if( $("ul.tabs li:has(a[href=" + tab + "])").length ) {
    loadTab.call($("ul.tabs li:has(a[href=" + tab + "])")[0]);
}
user113716
  • 318,772
  • 63
  • 451
  • 440
  • @Victor - Yes, that's why I added the info at the top. I'll delete the jQueryUI part. You get the information from the URL using `window.location.hash`. – user113716 Jul 02 '10 at 17:12
  • @Victor - Updated my answer with a couple of solutions that fit your HTML. – user113716 Jul 02 '10 at 17:48
  • I don't get it to work, the code at the bottom of your post don't open the first tab on open and the url thingy still dont work... – Victor Bjelkholm Jul 03 '10 at 11:58
  • @Victor - I tested both, and they both work for me. Try doing this: `alert( window.location.hash );` and tell me what you get. If you use the first solution in my answer, make sure it is placed *after* your javascript code. – user113716 Jul 03 '10 at 12:29
0

If you give the tabs an ID which relates to the 'url' you wish to use, you can add a single line to your jQuery to make it work. Here is some example HTML:

<ul class="tabs">
  <li id="tab-1">Tab number 1</li>
  <li id="tab-2">Tab number 2</li>
  <li id="tab-3">Tab number 3</li>
</ul>

Then update your jQuery as follows:

$(document).ready(function() {

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

    //On Click Event
    $("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;
    });

    // 'click' the tab with ID indicated in the URL
    $('ul.tabs li' + location.hash).trigger('click');
});

ALTERNATIVELY - if you can't update the ID's of the LI's, you could replace the line I added above with this one:

    //chop off the #tab bit from the URL, keeping the number at the end
    var tab = location.hash.substring(4);
    // 'click' the tab indicated in the URL
    $('ul.tabs li:nth-of-type(' + tab + ')').trigger('click');
clinton3141
  • 4,751
  • 3
  • 33
  • 46