Question

Am trying to create a tabbed interface in which the tabs can be visible via url and when clicked.
I have the following jQuery code

$(function() {
        var tabContent = $('.tab-content');
        var tabs = $('.stream-tabs li');
        var urlHash = window.location.hash;

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

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

This is my html markup

<ul class="stream-tabs">
                    <li><a href="#pheed-timeline">Pheed Timeline</a></li>
                    <li><a href="#directed-pheeds">Directed Pheeds</a></li>
                    <li><a href="#favourite-pheeds">Favourite Pheeds</a></li>
                </ul>
        <div class="tab-container">
            <div id="pheed-timeline" class="tab-content active-tab">
           Pheeed Timovmds
            </div>

            <div id="directed-pheeds" class="tab-content inactive">
           Directed pheeds
            </div>

            <div id="favourite-pheeds" class="tab-content inactive">
           favourite pheeds
            </div>
       </div>

When i click on the tab, nothing happens, the url just changes
What am i doing wrong

Answer 1

I think you’re looking for something like this:

// get the current url or even the anchor of it
var path = document.location.toString();
// save current anchor in "anchor" var
var anchor = '#' + path.split('#')[1];   

// if no anchor is set, jquery will automatically set it to "undefined"
if(anchor != '#undefined') {
    // remove the class from the active tab
    $(".active").removeClass("active");  
    // set the active tab to the new one
    $(anchor).parent().addClass("active");
    // this hides the content of all tabs
    $(".tabContent").hide();  
    // show the new content of the clicked tab
    var content_show = $(anchor).attr("title");  
    $("#"+content_show).show();
}

I hope it’s not too hard to understand. But it should be helpfull for your own code.

For better understanding, here’s my HTML code:

<div class="tabs">
    <ul>
        <li class="active"><a href="#" title="tabContent_1" class="tab">{{@lng.settings}}</a></li>
        <li><a href="#members" id="members" title="tabContent_2" class="tab">{{@lng.members}}</a></li>
        <li><a href="#milestones" id="milestones" title="tabContent_3" class="tab">{{@lng.milestones}}</a></li>
        <li><a href="#roles" id="roles" title="tabContent_4" class="tab">{{@lng.roles}}</a></li>
        <li><a href="#categories" id="categories" title="tabContent_5" class="tab">{{@lng.categories}}</a></li>
    </ul>
</div>

<div class="tabContent" id="tabContent_1">
<!-- content here -->
</div>