问题
I 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 paste bin:-http://pastebin.com/E85NsNtg
<!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>
jquery
$(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 ($('#_ctl0_hdnCurrentTabSelection').val() == "") {
$('#_ctl0_hdnCurrentTabSelection').val(location.hash)
}
// 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="' + $('#_ctl0_hdnCurrentTabSelection').val() + '"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
window.location.href = window.location.href.toString().split('#')[0] + $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');
//window.location.href = window.location.href.toString().replace($active.attr('href'), '');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$('#_ctl0_hdnCurrentTabSelection').val($active.attr("href"))
$content = $($(this).attr('href'));
window.location.href = window.location.href.toString().split('#')[0] + $active.attr('href');
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
$(document).on('keydown',function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
if(!$('#tab1:last-child').is(':focus') && window.location.href.search('tab1') != -1){
$('#ATab1').removeClass('active');
$('#ATab2').addClass('active');
$('#tab1').hide();
$('#tab2').show();
$('#tab3').hide();
$('#tab4').hide();
$('#tab5').hide();
window.location = "#tab2";
}
else if(!$('#tab2:last-child').is(':focus') && window.location.href.search('tab2') != -1){
$('#ATab2').removeClass('active');
$('#ATab3').addClass('active');
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').show();
window.location = "#tab3";
}
else if(!$('#tab3:last-child').is(':focus') && window.location.href.search('tab3') != -1){
$('#ATab3').removeClass('active');
$('#ATab4').addClass('active');
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
$('#tab4').show();
window.location = "#tab4";
}
else if(!$('#tab4:last-child').is(':focus') && window.location.href.search('tab4') != -1){
$('#ATab4').removeClass('active');
$('#ATab5').addClass('active');
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
$('#tab4').hide();
$('#tab5').show();
window.location = "#tab5";
}
else if(!$('#tab5:last-child').is(':focus') && window.location.href.search('tab5') != -1){
$('#ATab5').removeClass('active');
$('#ATab6').addClass('active');
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
$('#tab4').hide();
$('#tab5').hide();
$('#tab6').show();
window.location = "#tab6";
}
else if(!$('#tab6:last-child').is(':focus') && window.location.href.search('tab6') != -1){
$('#ATab6').removeClass('active');
$('#ATab1').addClass('active');
$('#tab1').show();
$('#tab2').hide();
$('#tab3').hide();
$('#tab4').hide();
$('#tab5').hide();
$('#tab6').hide();
$('#tab7').hide();
window.location = "#tab1";
}
}
e.preventDefault();
});
});
回答1:
Please add jquery latest version on your website
here is the code(please put on <head> tag):-
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
回答2:
You are using jQuery syntax but you are not referencing the jQuery library in your html. Make sure you add this line right under the title element
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
回答3:
You can use the children selector:http://jsfiddle.net/Eq3Kn/
$content.show();
$content.children('input').eq(0).focus();
Note: I have implemented the focus code for clicks and keyboard navigation from tab1 to tab2.
来源：https://stackoverflow.com/questions/21521265/on-pressing-tab-it-is-not-moving-to-next-tab