Click here to Skip to main content
15,902,777 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm new to working with JS/jQuery, I've been currently trying to figure out how to make this work, by trying many different ways that I've found here and on different sites, and am unable to get this working.

I have a website that has tabs, that changes a div's content when the click on the buttons in the menu. This all works fine, but I want to be able to link to each separate "page" using hash tags example.com/#tab-1

HTML:
XML
<div class="tabWrapper">
<div class="tabContent">
<div class="label">TAB 1</div>
<?php include 'tab1.php'; ?>
</div>
<div class="tabContent">
<div class="label">TAB 2</div>
<?php include 'tab2.php'; ?>
</div>


tabWrapper looks like this after being generated
XML
<div class="tabWrapper">
<ul class="tabs">
<li class="tab-1">TAB 1</li>
<li class="tab-2">TAB 2</li>
</ul>


JS:
C#
// Generate tab navigation
if ($('div.tabWrapper').length != 0)
{
    $('div.tabWrapper').each(function()
    {
        // Prepare tab output
        var printTabs = '<ul class="tabs">';
        var tabContent =  $(this).find('.tabContent');
        var tabCount = tabContent.length;

        $(tabContent).each(function(key)
        {
            // Hide tab if it is not the first
            if (key != 0)
            {
                $(this).hide();
            }

            // Get label for tab
            var label = $(this).find('.label').text();

            // Use a number if no label was given
            if (!label)
            {
                label = 'Tab ' + (key + 1);
            }

            // Add id to tab content
            $(this).addClass('tab-' + key);
            printTabs+= '<li class="tab-' + key + '">' + label + '</li>';
        });

        // Add tabs
        $(this).prepend(printTabs + '</ul>');
        $(this).find('li:first').addClass('active');
    });
}
// Handle click on tabs
$('.tabWrapper').delegate('ul.tabs li', 'click', function()
{
    // Deny click on active element
    if ($(this).is('.active'))
    {
        return false;
    }

    // Get tab id
    var id = $(this).attr('class').split('-');
    id = id[1];

    // Display and animate new tab content
    var parent = $(this).parent().parent();
    parent.find('ul.tabs li').removeClass('active');
    $(this).addClass('active');
    parent.find('.tabContent').hide()
    parent.find('.tab-' + id).animate({ opacity: 'show' }, animationSpeed);
});


Here is what I currently have, which I'm trying to get to work
C#
setInterval(hash,1000);
function hash() {
    if(window.location.hash){
    var hash = window.location.hash.substring(1);
    $("." + hash).click();
    }
}


Which I added in the js file just above
<<b>pre>$('.tabWrapper').delegate('ul.tabs li', 'click', function()

I'm not sure how far I'm off with that code, as it doesn't seem to work at all. I just want it to see if there is a hash tag in the url, and if there is then run the click function to change the content.

Thank you.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900