how to make a keyboard navigation using jquery?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="bbbbb" />
<title>Untitled 2</title>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<style>
#test ul{list-style:none;}
#test li{width:75px;height:25px;padding-left:25px;padding-right:25px;padding-top:10px;padding-bottom:10px;}
.active{background:#AEABAB;}
a.active{color:#ffffff;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$(document).keydown(function(e) {
switch(e.keyCode) {
case 38: // up arrow
window.location.href = 'index.html';
break;
}
});
});
</script>
<div id="test">
<ul>
<li class="active"><a href="test.html">Home</a></li>
开发者_StackOverflow中文版 <li><a href="#">My work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</body>
</html>
i don't want to use "window.location.href = 'index.html';" but want to click my navigation link using click method is it possible???
you can check here
i have created a page for keyboard navigation!
Yes, if you want to click the 'active' link then you can replace window.location.href = 'index.html' with:
window.location.href = $("li.active a").attr('href');
If you simply want to map key 38 to that link then you should give the anchor an id (indexAnchor) so
<a id="indexAnchor" href="text.html">Home</a>
and
window.location.href = $("#indexAnchor").attr('href');
Here is an example.
$('#ID').click(); doesn't target the href in but if you've defined onclick it target's that.
so
$(document).ready(function() {
$(document).keydown(function(e) {
switch(e.keyCode) {
case 38: // up arrow
$('#work').click();
break;
}
});
});
will execute <a href="#" id="work" onclick="alert('test')">Test</a> the alert.
http://jsfiddle.net/2SKAH/6/
$('html a:first').trigger('click');
Yes, give each link an ID or class and use:
case 38: //Up arrow
$('#home').click();
That will cause the link with an id of home to be clicked.
加载中,请稍侯......
精彩评论