SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to move in to next tab using Tab key

    I am following this tutorial: http://www.jacklmoore.com/notes/jquery-tabs/

    In which i created text boxes in tab 1,2,3. i want to create a function when user in first tab after pressing the tab key it will move in to next tab. How i can do this. I am using asp.net text boxes and drop down list in tabs. I was give tab index to inputs but it was not working. I want to do this using jquery.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset='utf-8'/>
    		<title>jQuery Tabs Demo</title>
    		<style>
    			* {padding:0; margin:0;}
    
    			html {
    				background:url(/img/tiles/wood.png) 0 0 repeat;
    				padding:15px 15px 0;
    				font-family:sans-serif;
    				font-size:14px;
    			}
    
    			p, h3 { 
    				margin-bottom:15px;
    			}
    
    			div {
    				padding:10px;
    				width:600px;
    				background:#fff;
    			}
    
    			.tabs li {
    				list-style:none;
    				display:inline;
    			}
    
    			.tabs a {
    				padding:5px 10px;
    				display:inline-block;
    				background:#666;
    				color:#fff;
    				text-decoration:none;
    			}
    
    			.tabs a.active {
    				background:#fff;
    				color:#000;
    			}
    
    		</style>
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    		<script>
    			// Wait until the DOM has loaded before querying the document
    			$(document).ready(function(){
    				$('ul.tabs').each(function(){
    					// For each set of tabs, we want to keep track of
    					// which tab is active and it's associated content
    					var $active, $content, $links = $(this).find('a');
    
    					// If the location.hash matches one of the links, use that as the active tab.
    					// If no match is found, use the first link as the initial active tab.
    					$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    					$active.addClass('active');
    					$content = $($active.attr('href'));
    
    					// Hide the remaining content
    					$links.not($active).each(function () {
    						$($(this).attr('href')).hide();
    					});
    
    					// Bind the click event handler
    					$(this).on('click', 'a', function(e){
    						// Make the old tab inactive.
    						$active.removeClass('active');
    						$content.hide();
    
    						// Update the variables with the new link and content
    						$active = $(this);
    						$content = $($(this).attr('href'));
    
    						// Make the tab active.
    						$active.addClass('active');
    						$content.show();
    
    						// Prevent the anchor's default click action
    						e.preventDefault();
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul class='tabs'>
    			<li><a href='#tab1'>Tab 1</a></li>
    			<li><a href='#tab2'>Tab 2</a></li>
    			<li><a href='#tab3'>Tab 3</a></li>
    		</ul>
    		<div id='tab1'>
    			<h3>Section 1</h3>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
    		</div>
    		<div id='tab2'>
    			<h3>Section 2</h3>
    			<p>Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris, eu accumsan nisl aliquam eu.</p>
    		</div>
    		<div id='tab3'>
    			<h3>Section 3</h3>
    			<p>Suspendisse potenti. Morbi laoreet magna vitae est mollis ultricies. Mauris eget enim ac justo eleifend malesuada. Proin non consectetur est. Integer semper laoreet porta. Praesent facilisis leo nec libero tincidunt blandit.</p>
    		</div>
    	</body>
    </html>
    Last edited by TechnoBear; Jan 3, 2014 at 08:23. Reason: Code tags added


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •