Question

I have the following code: fiddle, how can I set it up so I can have urls to the different tabs, I have tried adding the tab id to the url and that doesn’t work. I have also tried anchors and that doesn’t work, any help appreciated.

Answer 1

You can do this very easy. As your list is corresponding to the tabs semself in the order of appearance you don’t need the ids and you can do it like this:

HTML

<ul id="tabs">
    <li><a href="http://domain.com/#tab1">test1</a></li>
</ul>

<div>
      <div class="container">Some content1</div>
</div>

JavaScript

var tabs = $('#tabs a');
var content = $('.container');
var current = 0;

tabs.click( function(event) {
    // get which element was clicked
    var pos = tabs.index ($(event.target) );
    // remove current active class
    tabs.eq(current).removeClass('active');
    // fade out current element
    content.eq(current).fadeOut( function() {
        //afterwards set current to selected, update class and fade in content
        current = pos;
        tabs.eq(current).addClass('active');
        content.eq( current ).fadeIn();
        // append hash to url
        window.location.hash = tabs.eq(current).attr('href');
    });

    event.preventDefault();
});​

This is the line that adds the anchor to the URL:

window.location.hash = tabs.eq(current).attr('href');

Note, that this won’t work in the fiddle. Or you can leave this line out and add real urls like I did in the source code above.

I also optimized your code, in order that uses less selectors and it’s a little shorter. And it also uses a single class active for the current element (instead of applying a class to all inactive elements). You just have to adjust your styles.

I also added some CSS which shows the first element by default and hides all other – no JavaScript needed:

.container {
    display:none;
}

.container:first-child {
    display:block;
}

Fiddle

http://jsfiddle.net/insertusernamehere/hCWMj/