jQuery Previous / Next

by Tomas Salvet

HTML

<div class="prev">
Předchozí link active</div>
<div class="next">
Další link active
</div>
<div id="links">
<div class="link1">
<div class="linktext">Link1</div>
</div>
<div class="link2">
<div class="linktext">Link2</div>
</div>
<div class="link3">
<div class="linktext">Link3</div>
</div>
</div>
<div id="linksobsah">
<div>
<ul>
<li>Link 1 submenu 1</li>
<li>Link 1 submenu 2</li>
<li>Link 1 submenu 3</li>
</ul>
<div id="menulink1">
<div>Link 1 submenu 1 content</div>
<div>Link 1 submenu 2 content</div>
<div>Link 1 submenu 3 content</div>
</div>
</div>
<div>
<ul>
<li>Link 2 submenu 1</li>
<li>Link 2 submenu 2</li>
<li>Link 2 submenu 3</li>
</ul>
<div id="menulink2">
<div>Link 2 submenu 1 content</div>
<div>Link 2 submenu 2 content</div>
<div>Link 2 submenu 3 content</div>
</div>
</div>
<div>Content 3</div>
</div>

JavaScript

$(document).ready(function() {
      $('#links').find('a:eq(0)').addClass('active');
    	$('#linksobsah').children().hide().eq(0).show();     
	
			$('#links').children().click(function() {
      $('#links').find('a:eq(0)').addClass('active');
      var index = $('#links').children().index(this);
      $('#linksobsah').children().hide(100).eq(index).show(500);               
			$('#links').children().removeClass('active');
      $(this).addClass('active'); 
    });
});

$(document).ready(function() {
	    $('#menulink1').children().hide();     
			$('#linksobsah ul').children().click(function() {
      $('#linksobsah ul').find('li').addClass('active');
			var index = $('#linksobsah ul').children().index(this);
      $('#menulink1').children().hide(100).eq(index).show(500);               
			$('#linksobsah ul').children().removeClass('active');
      $(this).addClass('active'); 
    });
	    });

	
$(document).ready(function() {
	   $('#menulink2').children().hide();     
		 $('#linksobsah ul:eq( 1 )').children().click(function() {
     $('#linksobsah ul:eq( 1 )').find('li').addClass('active');
		 var index = $('#linksobsah ul:eq( 1 )').children().index(this);
     $('#menulink2').children().hide(100).eq(index).show(500);               
		 $('#linksobsah ul:eq( 1 )').children().removeClass('active');
     $(this).addClass('active'); 
    });
	    });

jQuery(document).ready(function($) {   
	  $('.prev').click(function() {
      $('#links').children().prev().addClass('active');
		  var index = $('#links').children().index('#links');
      $('#linksobsah').children().hide(500).eq(index).show(500);               
			$('#links').children().removeClass('active');
      $('#links').addClass('active'); 
    });
});

jQuery(document).ready(function($) {   
	  $('.next').click(function() {
      $('#links').children().next().addClass('active');
		  var index = $('#links').children().index('#links');
      $('#linksobsah').children().hide(500).eq(index).show(500);        ...