javascript 怎样实现按tab跳转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 怎样实现按tab跳转相关的知识，希望对你有一定的参考价值。
请问用javascript实现 在表单中 按tab 键使光标从一处跳转到下一个是用什么语句
谢谢 本人纯新人 对函数 变量 等等 不很熟悉 希望能回答的明了一点 谢谢
有代码能用的 再加10分
稍微解释一下程序：
1. 键盘tab键的键代码是9，可以用event.keyCode来获得按下一个键时的键代码，进而可以知道按下了哪个键。
2. 接着程序找出当前光标所在的文本框，然后将光标移到它的前一个文本框中。注意，如果当前文本框已经是form中的第一个了，那么再往前移动前面就没有文本框了，此时就会出现错误，所以下面的程序判断当文本框已经是第一个时将光标移到倒数第一个之中，这样就构成了循环移动，不会发生错误了。
3. 最后，要将键盘的原始事件取消，即按下tab键时不让浏览器自动跳转光标，否则我们移到前一个它又跳回来了，岂不是白费劲？
有什么问题欢迎找我讨论。
<script type="text/javascript">
function goNext()
if(event.keyCode != 9)return;
var ele = event.srcElement;
var theForm = ele.form;
if (theForm.id != "form1")return;
for (i=0; i<theForm.length; i++)
if (theForm.elements[i].id == ele.id)
if (i>0)
theForm.elements[i-1].focus();
else
theForm.elements[theForm.length-1].focus();
break;
event.returnValue=false;
</script>
<body onkeydown="goNext();">
<form id="form1">
<input id="text1" type="text" />
<br /><br />
<input id="text2" type="text" />
<br /><br />
<input id="text3" type="text" />
</form>
</body>
下面是按正常顺序移动光标的代码，和上面的大同小异：
<script type="text/javascript">
function goNext()
if(event.keyCode != 9)return;
var ele = event.srcElement;
var theForm = ele.form;
if (theForm.id != "form1")return;
for (i=0; i<theForm.length; i++)
if (theForm.elements[i].id == ele.id)
if (i<theForm.length-1)
theForm.elements[i+1].focus();
else
theForm.elements[0].focus();
break;
event.returnValue=false;
</script>
<body onkeydown="goNext();">
<form id="form1">
<input id="text1" type="text" />
<br /><br />
<input id="text2" type="text" />
<br /><br />
<input id="text3" type="text" />
</form>
</body> 参考技术A 不需要，浏览器自动会跳转的
Layui实现跳转到指定tab栏
需求背景：实现页面之间的联动跳转，并跳转到指定tab栏
解决方法：
html代码：
<div class="layui-tab layui-tab-brief" lay-filter="current">
<ul class="layui-tab-title">
<li lay_id='one' class="layui-this">PHP</li>
<li lay_id='two'>html</li>
<li lay_id='three'>python</lilay_id='one'>
<li lay_id='four'>go</li>
</ul>
<div class="layui-tab-content">
<!--tab1-->
<div class="layui-tab-item layui-show">
内容1
</div>
<!--tab2-->
<div class="layui-tab-item layui-show">
内容2
</div>
<!--tab3-->
<div class="layui-tab-item layui-show">
内容3
</div>
<!--tab4-->
<div class="layui-tab-item layui-show">
内容4
</div>
</div>
</div>
- 在正常选项卡基础上，增加如图代码。
- lay-filter代表地址栏中参数的名称。
- lay-id来作为唯一的匹配索引，以用于外部的定位切换。
步骤2,JS部分
<script>
layui.use('element', function(){
var element = layui.element;
//获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
var layid = location.hash.replace(/^#current=/, '');//current为刚才定义的lay-filter
element.tabChange('current', layid); //假设当前地址为：http://a.com#current=two，那么选项卡会自动切换到“html”这一项
//监听Tab切换，以改变地址hash值
element.on('tab(current)', function(){
location.hash = 'current='+ this.getAttribute('lay-id');
});
});
</script>以上是关于javascript 怎样实现按tab跳转的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript跳转到指定页面并且到指定的tab切换窗口
android中的tabHost怎样在点击一个选项卡后跳转到一个activity，点击另一个选项卡跳转到另一个activity?