Question

First question here as a user, so please take it easy on this noob!

Anyway, had a quick question concerning jQuery tabs. Not the UI version, rather, a different version. What I’m trying to do is be able to activate a link from a separate navigation area, but get the selected tab to appear as “current” Here’s the script I’m using:

<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
});
$('#sitenav ul li a').click(function(){
        $('#tabs ul li').removeClass('active');
        $(this).parent('#tabs ul li a').addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
});
});
</script>

And here is the secondary navigation accessing this:

<div id="sitenav">
    <ul>
    <li class="home"><a href="/search/">Search ISU...</a></li>
    <li><a href="#tab1" title="Faculty/Staff">Faculty/Staff</a></li>
    <li><a href="#tab2" title="Student">Student</a></li>
    <li><a href="#tab3" title="Department">Department</a></li>
    <li><a href="#tab4" title="Website">Website</a></li>
    </ul>   
</div>

Just for aesthetic reasons, here is the original navigation for the actual tabbed areas:

<div id="tabs">
<ul>
<li><a href="#tab1">Faculty/Staff</a></li>
<li><a href="#tab2">Student</a></li>
<li><a href="#tab3">Departments</a></li>
<li><a href="#tab4">ISU Website</a></li>
</ul>

(the ending tag for the “tabs” div is at the bottom of the document encircling all the content areas, which work fine…just an fyi! 🙂 )

What I was able to do was get the “sitenav” to actually link to the other areas, but for the life of me, I cannot get the tab to highlight and become “current”. Surely it’s something small that I just keep overlooking, but perhaps fresh eyes might see it! Thank you all!

edit: jeez…almost forgot. here is the test version of this thing in action, sort of: http://www.indstate.edu/search/index1.htm

Answer 1

So if you click on #tab1 you want on the other list highlighted?
I would do it like this:

$('#sitenav ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs ul li a[href="'+currentTab +'"]').parent().addClass('active');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
});

if you navigate from another page, the page renders from scratch so it won’t matter what you have set on the last page as an active tab or hash. if you want to select the active tab and show the activated element you’ll have to do it when the page loaded.
so in that case I would make sure that in my css #tabs div has display: none; and none of the lis have active class by default.
and you’d need something like this:

$(document).ready(function(){
    var currentTab;
    if(window.location.hash){
       // check if this is an existing tab
        if($('#tabs ul li a[href="'+window.location.hash+'"]').length > 0){
             currentTab = window.location.hash;
        }
    }
    if(currentTab){
       //select and show the current tab
       $('#tabs ul li a[href="'+currentTab +'"]').parent().addClass('active');
       $(currentTab).show();
    } else {
       //select and show the first tab
       $('#tabs div:first').show();
       $('#tabs ul li:first').addClass('active');  
    }
});