当我们用锚点定位到页面某个元素时,接下来按tab的话是想进入到目前元素( id="content")的下一个连接
<a href="#content">Skip to Content</a>

<!-- other links -->

<div id="content">
<!-- your content here -->
</div>
但是chrome 和 ie 有问题,按tab是选中 skip to Content之后的那个连接,修复方法就是在定位之后选中 content,通过修改 tabIndex
window.addEventListener("hashchange", function(event) {

    var element = document.getElementById(location.hash.substring(1));     //location.hash.substring(1) 指的是被点击的连接的href中的content

    if (element) {

        if (!/^(?:a|select|input|button|textarea)$/i.test(element.tagName)) {
element.tabIndex = -1;
} element.focus();
} }, false);
tabIndex的值,根据W3C的规定,范围在0到 32767,通常只有表单元素可以设为focus,但是通过把tabIndex设置为-1,并且调用元素的focus函数,任何元素也可以实现(除了opera)

完善tab页面定位的更多相关文章

  1. html tab页面切换事件。

    $(document).bind("visibilitychange",function(e){ //只对tab页面切换有效 //document.visibilityState ...

  2. 用Fragment制作的Tab页面产生的UI重叠问题

    本文出处:http://blog.csdn.net/twilight041132/article/details/43812745 在用Fragment做Tab页面,发现有时候进入应用会同时显示多个T ...

  3. 使用Intent创建Tab页面

    前面已经介绍了如何使用TabActivity来创建Activity布局,前面添加Tab页面使用了TabHost.TabSpec如下方法. setContent(int viewId):直接将指定Vie ...

  4. windows资源管理器多标签打开 windows文件夹多标签浏览 浏览器tab页面一样浏览文件夹 clover win8 win10 报错 无响应问题怎么解决 clover卡死 clover怎么换皮肤

    大家都知道,我们打开一堆文件夹的时候,是什么样子 “厚厚的一叠”图标堆叠在一起的,非常的不方便 那么,是不是可以像浏览器一样的tab页面展示呢? 答案是可以的 安装好就是这样子的 是不是方便漂亮了很多 ...

  5. confluence 新tab 页面打开 kibana short link

    confluence 新tab 页面打开 https://confluence.atlassian.com/confkb/how-to-force-links-to-open-in-a-new-win ...

  6. Easyui实用视频教程系列---Tree点击打开tab页面

    Easyui实用视频教程系列---Tree点击打开tab页面 首先 我们 要搭建环境 easyui 环境 然后 把tree 给创建出来 在某个位置 粘贴 下面代码 <ul id="tt ...

  7. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  8. 《手把手教你》系列技巧篇(四十五)-java+ selenium自动化测试-web页面定位toast-上篇(详解教程)

    1.简介 在使用appium写app自动化的时候介绍toast的相关元素的定位,在Web UI测试过程中,也经常遇到一些toast,那么这个toast我们这边如何进行测试呢?今天宏哥就分两篇介绍一下. ...

  9. 《手把手教你》系列技巧篇(四十六)-java+ selenium自动化测试-web页面定位toast-下篇(详解教程)

    1.简介 终于经过宏哥的不懈努力,偶然发现了一个toast的web页面,所以直接就用这个页面来夯实一下,上一篇学过的知识-处理toast元素. 2.安居客 事先声明啊,宏哥没有收他们的广告费啊,纯粹是 ...

随机推荐

  1. Ngnix技术研究系列1-通过应用场景看Nginx的反向代理

    随着我们业务规模的不断增长,整个系统规模由两年前的几十台服务器,井喷到现在2个数据中心,接近400台服务器,上百个WebApi站点,上百个域名. 这么多的WebApi站点这么多的域名,管理和维护成本很 ...

  2. IO模型分析

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  3. Coin Change (IV) (dfs)

    Coin Change (IV) Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %lld & %llu [Subm ...

  4. [bzoj1059] [ZJOI2007] 矩阵游戏 (二分图匹配)

    小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏--矩阵游戏.矩阵游戏在一个N *N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作:行交换操作:选 ...

  5. RobotFramework自动化测试框架-移动手机自动化测试Click Element关键字的使用

    Click Element关键字用来模拟点击APP界面上的一个元素,该关键字接收一个参数[ locator ] ,这里的locator指的是界面元素的定位方式. 示例1:使用Click Element ...

  6. IOC模式理解

    理解IOC inversion of control  控制反转  与  DI   Dependency Injection  依赖注入概念之前,我们需要知道在一个系统的设计过程中,降低各模块之间的相 ...

  7. wpf值转换器IValueConverter例子

    转载:http://blog.163.com/wangzhenguo2005@126/blog/static/37140526201085113430862/ 值转换器可以把一种类型转换成另一种类型. ...

  8. 开源API集成测试工具 Hitchhiker v0.2更新 - 压力测试

    Hitchhiker 是一款开源的 Restful Api 集成测试工具,支持Schedule, 数据对比,压力测试,可以轻松部署到本地,和你的team成员一起管理Api. 详细介绍请看: http: ...

  9. Nodejs入门-基于Node.js的简单应用

    服务端JavaScript 众所周知的,JavaScript是运行在浏览器的脚本语言,JavaScript通常作为客户端程序设计语言使用,以JavaScript写出的程序常在用户的浏览器上运行.直至N ...

  10. invalid types 'int[int]' for array subscript// EOF 输入多组数据//如何键盘输入EOF

    数组维度搞错了 一次运行,要输入多组数据,直到读至输入文件末尾(EOF)为止 while(scanf("%d %d",&a, &b) != EOF) // 输入结束 ...