Jquery loading content

Question

Hi,

I'm currently using the below script to load content on click of a link. What I would like to know is it possible to visit the url services.html#serviceone which would then show the content and the active link for that ID?

$(document).ready(function () {
    $('#content div.wrap').hide(); // Hide all divs
    $('#content div.wrap:first').show(); // Show the first div
    $('#tabs ul li a:first').addClass('active'); // Set the class of the first link to active
    $('#tabs ul li a').click(function () { //When any link is clicked
        $('#tabs ul li a').removeClass('active'); // Remove active class from all links
        $(this).addClass('active'); //Set clicked link class to active
        var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
        $('#content div.wrap').hide(); // Hide all divs
        $(currentTab).fadeIn('normal'); // Show div with id equal to variable currentTab
        return false;
    });
});

Hopefully what I'm asking makes some sense. Much appreciated.

Answer 1

What I get from this is that you want to extract the id from the end of the url and use that for the "tab" to display, correct?

 var currentTab = '#' + $(this).attr('href').split('#')[1];
 ...
 $(currentTab).fadeIn('normal');
 ...

If you want to load the content from the url instead of merely show existing content, you can use load with a filter.

var url= $(this).attr('href');
...
$('someselector').load(url.replace(/#/,' #')).fadeIn('normal');

Answer 2

Hi thanks all for replying. Sorry I didn't provide more detail.

tvanfosson, that could be what I'm after.

I want to be able to link to the page and load the content based on the id, with the tab active. Without the above script using the url 'services.html#div1' would jump to the div with that id (as you know), with the script in place I want the same url to load the div, at the moment just the first div is loaded.

Does that make sense?

Thank you.

[EDIT]

Just noticed that when clicking on the menu tab to load the content, it doesn't add the #id to the end of the url, so I doubt what I want will work!