2035 posts Review Manager
  • Has referred 10+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Member of the Envato Team
+12 more
Envato team

Hi guys/gals,

I’ve setup some jQuery tabs with the UI. (http://ui.jquery.com) I’ve setup buttons to play (switch tabs every 5 seconds) and stop the tab switching. I can’t figure out how to create functions to navigate next and previous through the tabs though.

I’ve read http://docs.jquery.com/UI/Tabs#Events so I’m guessing I would use ui.index and I know you can select a tab using .tabs(‘select’, 1); with 1 being the tab index value or putting the tag id there. I’ve managed to get the next/previous button to change the tab the first time it is clicked but after that nothing happens.

Could someone help me out with this? Thanks everyone :)

3 posts
  • Has been part of the Envato Community for over 7 years
  • Has collected 1+ items on Envato Market

This might help you out. I’ve created a way to use next/previous navigation by getting the currently selected tab then adding/subtracting 1.

<script type="text/javascript" charset="utf-8"> // <![CDATA[ $(document).ready(function() { $('.next').click(function() { var $tabs = $('ul.tabs').tabs(); var selected = $tabs.data('selected.tabs'); $tabs.tabs('select', selected + 1); return false; }) $('.previous').click(function() { var $tabs = $('ul.tabs').tabs(); var selected = $tabs.data('selected.tabs'); $tabs.tabs('select', selected - 1); return false; }) }); // ]]> </script>

You’ll want to change both instances of ‘ui.tabs’ in var $tabs = $('ul.tabs').tabs(); to match whatever your class/id is.

Hope this helps.