jQuery: The Write Less, Do More JavaScript Library

How to make a tab open when linked from separate page?

View: New views
2 Messages — Rating Filter:   Alert me  

How to make a tab open when linked from separate page?

by dirtybird :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

I have a simple tab set up like this....
<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;
        });
});
</script>

I want to be able to open a tab on this page (http://www.dirtybirddesignlab.com/5280Main/services.html) from the drop down under "services" on the index page. IE clicking on "Creative Design" would open the services.html page with the Creative Design tab displayed. I have been looking around for what seems like forever and can't find anything that works. Please help a guy out!
Thanks,
Kane

Re: How to make a tab open when linked from separate page?

by ripcurlksm :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Add this to your javascript:
---------------------------------------------------------------
var $tabs2 = $('#tabs').tabs();
$('#services').click(function() {
    $tabs2.tabs('select', 1); // switch to second tab
    return false;
});
---------------------------------------------------------------

Add the id "services" to your navigation link:
---------------------------------------------------------------
id="services"
---------------------------------------------------------------


This is also covered here under "...select a tab from a text link instead of clicking a tab itself"
http://docs.jquery.com/UI/Tabs

And here under "triggering, enabling and disabling"
http://stilbuero.de/jquery/tabs/


dirtybird wrote:
I have a simple tab set up like this....
<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;
        });
});
</script>

I want to be able to open a tab on this page (http://www.dirtybirddesignlab.com/5280Main/services.html) from the drop down under "services" on the index page. IE clicking on "Creative Design" would open the services.html page with the Creative Design tab displayed. I have been looking around for what seems like forever and can't find anything that works. Please help a guy out!
Thanks,
Kane