By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,615 Members | 1,961 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,615 IT Pros & Developers. It's quick & easy.

on pressing tab it is not moving to next tab

P: 1
am creating tab using html css and jquery. I am not using jquery ui. Let me explain the problem.

in tabs there are Many tabs.every tabs contains texbox,drop down,checkbox, etc. for example when user in the first tab. in this tab text boxes are there. when user come to last text box when it is pressing the tabkey it will move to next tab's first element(like textbox/dropdown etc).I created this but it is not moving to tabs textbox. the code is available on pastebin and js fiddle. i not find findout what is the problem with my code. if you need any clarification plz ask me

Note :please do not suggest tabindex. I want to do using jquery.

Link:demo on jsfiddle : http://jsfiddle.net/Eq3Kn/
paste bin:-http://pastebin.com/E85NsNtg

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset='utf-8'/>
  5.         <title>jQuery Tabs Demo</title>
  6.         <style>
  7.             * {padding:0; margin:0;}
  8.  
  9.             html {
  10.                 background:url(/img/tiles/wood.png) 0 0 repeat;
  11.                 padding:15px 15px 0;
  12.                 font-family:sans-serif;
  13.                 font-size:14px;
  14.             }
  15.  
  16.             p, h3 { 
  17.                 margin-bottom:15px;
  18.             }
  19.  
  20.             div {
  21.                 padding:10px;
  22.                 width:600px;
  23.                 background:#fff;
  24.             }
  25.  
  26.             .tabs li {
  27.                 list-style:none;
  28.                 display:inline;
  29.             }
  30.  
  31.             .tabs a {
  32.                 padding:5px 10px;
  33.                 display:inline-block;
  34.                 background:#666;
  35.                 color:#fff;
  36.                 text-decoration:none;
  37.             }
  38.  
  39.             .tabs a.active {
  40.                 background:#fff;
  41.                 color:#000;
  42.             }
  43.  
  44.         </style>
  45.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  46.         <script src="global.js"></script>
  47.         <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  48.     </head>
  49.     <body>
  50.     <div id="tabs">
  51.         <ul class='tabs'>
  52.             <li><a id="ATab1" href='#tab1' >Tab 1</a></li>
  53.             <li><a id="ATab2" href='#tab2' >Tab 2</a></li>
  54.             <li><a id="ATab3" href='#tab3' >Tab 3</a></li>
  55.             <li><a id="ATab4" href='#tab4' >Tab 4</a></li>
  56.             <li><a id="ATab5" href='#tab5' >Tab 5</a></li>
  57.             <li><a id="ATab6" href='#tab6' >Tab 6</a></li>
  58.  
  59.         </ul>
  60.         <div id='tab1'>
  61.             <h3>Section 1</h3>
  62.             Fisrt: <input type="textbox" />
  63.             <br />
  64.             Second: <input type="textbox" />
  65.             <br />
  66.             Third: <input type="textbox" />
  67.             <br />
  68.             Fourth: <input type="textbox" />
  69.         </div>
  70.         <div id='tab2'>
  71.             <h3>Section 2</h3>
  72.             Fifth: <input type="textbox" />
  73.             <br />
  74.             Sixth: <input type="textbox" />
  75.         </div>
  76.         <div id='tab3'>
  77.             <h3>Section 3</h3>
  78.             Seventh: <input type="textbox" />
  79.             <br />
  80.             Eighth: <input type="textbox" />
  81.         </div>
  82.         <div id='tab4'>
  83.         <h3>Section 4</h3>
  84.             ninth: <input type="textbox" />
  85.             <br />
  86.             tength: <input type="textbox" />
  87.         </div>
  88.         <div id='tab5'>
  89.         <h3>section 5</h3>
  90.         11: <input type="textbox" />
  91.         <br />
  92.         12: <input type="textbox" />
  93.     </div>
  94.  
  95.         <div id='tab6'>
  96.         <h3>section 6</h3>
  97.         13: <input type="textbox" />
  98.         <br />
  99.         14: <input type="textbox" />
  100.     </div>
  101.  
  102.  
  103.  
  104.     </body>
  105. </html>
  106.  
Feb 3 '14 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.