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
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
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 src="global.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul class='tabs'>
<li><a id="ATab1" href='#tab1' >Tab 1</a></li>
<li><a id="ATab2" href='#tab2' >Tab 2</a></li>
<li><a id="ATab3" href='#tab3' >Tab 3</a></li>
<li><a id="ATab4" href='#tab4' >Tab 4</a></li>
<li><a id="ATab5" href='#tab5' >Tab 5</a></li>
<li><a id="ATab6" href='#tab6' >Tab 6</a></li>
</ul>
<div id='tab1'>
<h3>Section 1</h3>
Fisrt: <input type="textbox" />
<br />
Second: <input type="textbox" />
<br />
Third: <input type="textbox" />
<br />
Fourth: <input type="textbox" />
</div>
<div id='tab2'>
<h3>Section 2</h3>
Fifth: <input type="textbox" />
<br />
Sixth: <input type="textbox" />
</div>
<div id='tab3'>
<h3>Section 3</h3>
Seventh: <input type="textbox" />
<br />
Eighth: <input type="textbox" />
</div>
<div id='tab4'>
<h3>Section 4</h3>
ninth: <input type="textbox" />
<br />
tength: <input type="textbox" />
</div>
<div id='tab5'>
<h3>section 5</h3>
11: <input type="textbox" />
<br />
12: <input type="textbox" />
</div>
<div id='tab6'>
<h3>section 6</h3>
13: <input type="textbox" />
<br />
14: <input type="textbox" />
</div>
</body>
</html>