jquery tabs, visible based on URL

Question

Am using jquery and tabs based on http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

<script type="text/javascript">
    $(function() {
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul#menu li").click(function() {
        $("ul#menu li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
        });
    });
</script>

Is it possible to adjust this so that depending on the value in the URL (page.html#tab4 etc), the corrosponding tab will show?

I believe in its current state it doesn't work because it returns false, and that

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

is looking for an anchor value, rather than the URL.

Hope this makes sense.

I (think) if a fix is possible, I need a way to get the #tab from the URL as well as based on the Anchor clicked.

Thanks

Answer 1

You can use window.location.hash to retrieve the #something part of the URL. See: https://developer.mozilla.org/en/window.location

---

Also, that code you posted... is probably a great list of what not to do in jQuery. Let's fix it for you:

$(function() {
    var tabContent = $(".tab_content");
    // Modified tutorial's code for this
    var tabs = $("#menu li");
    var hash = window.location.hash;

    tabContent.not(hash).hide();
    tabs.find('[href=' + hash + ']').addClass('active');

    tabs.click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        tabContent.hide();
        var activeTab = $(this).find("a").attr("href");

        $(activeTab).fadeIn();
        return false;
    });
});

Answer 2

yes try:

$('a[href="'+activeTab'"]').fadeIn();

Answer 3

Do you want to display the tab on load of the page?

 $(function() {
      $("ul#menu li").removeClass("active"); //Remove any "active" class  
      $(".tab_content").hide(); //Hide all tab content  

      // set the active class on the tab where the href ends with #tabN
      $("ul#menu li a[href$='" + window.location.hash + "]").closest("li").addClass("active");
      // use the #tabN part of the url as the id selector to show the content
      $(window.location.hash).fadeIn();
 });

Also, in your onclick handler, you probably want to replace the line

    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 

with

    var activeTab = $(this).find("a")[0].hash; //Find the rel attribute value to identify the active tab + content 

to get the #tabN part of the href.