jQuery - next/previous tab button

JavaScript
1

I’m just trying to get to grips with the basics of JavaScript/jQuery so I don’t have a great understanding of either yet.

I have a simple tab structure set up using the jQuery tabs UI, what I’d like is to add text links within each tab which the user can click to move to the next or previous tab without having to actually click the tab itself.

I’ve been searching the web for other people’s solutions but no amount of changes will produce a working button. Can anyone tell me how to achieve this? Here’s what I have at the moment:

JavaScript


<script type="text/javascript">
	$(document).ready(function(){
		$("#example").tabs();
	});
</script>

<script type="text/javascript">
	var $tabs = $('#example').tabs();
	$('#my-text-link').click(function() {
   		$tabs.tabs('select', 1);
                return false;
	});
</script>

HTML

<div id="example">
    <ul>
        <li><a href="#first-tab"><span>1</span></a></li>
        <li><a href="#second-tab"><span>2</span></a></li>
        <li><a href="#third-tab"><span>3</span></a></li>
    </ul>
        
    <div id="first-tab">
    	<p>Tab #1 <br /><br /><a href="" id="my-text-link">Next</a></p>
    </div>
    
    <div id="second-tab">
        <p>Tab #2</p>
	</div>

    <div id="third-tab">
        <p>Tab #3</p>
	</div>

</div>
2