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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes