- Envato Staff
- Has been a member for 4-5 years
- Attended a Community Meetup
- Australia
- Beta Tester
- Contributed a Blog Post
- Contributed a Tutorial to a Tuts+ Site
- Repeatedly Helped protect Envato Marketplaces against copyright violations
- Sold between 5 000 and 10 000 dollars
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 
- Bought between 1 and 9 items
- Has been a member for 5-6 years
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.
Request processing...