当我们用锚点定位到页面某个元素时,接下来按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. 【转】 IntelliJ IDEA像Eclipse一样打开多个项目

    http://blog.csdn.net/zht666/article/details/47831893 我们做项目实际中经常会遇到这样的情况,创建一个common项目(Maven项目)作为公用项目, ...

  2. Hbase对时,时差范围的确定

    Hbase对时具有严格的要求,集群内部所有机器之间的时差默认不能超过30秒,也就是说,一旦某个regionserver节点上的时间与master节点上的时间差值超过30秒,就会导致相应的regions ...

  3. IDE快捷键

    visual studio 中 : /// 快速函数注释 ctrl+k,ctrl+F 格式化代码 Android Studio  中: /**回车 快速函数注释 ctrl+h 查看继承关系 自动格式化 ...

  4. FPGA在其他领域的应用(三)

    广播领域: 专业的A/V(音频/视频),和演播室行业正在经历着激动人心的变化,例如,UHD/8K (超高清)视频.多平台内容交付.IP网络传输和云计算.2016里约奥运会使用4K分辨率视频播放,而日本 ...

  5. Java web 入门知识 及HTTP协议详解

     Java  web  入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...

  6. IP报文分片

    1. 最大传输单元(Maximum Transmission Unit,MTU). 以太网帧中的数据长度规定最小46 字节,最大1500 字节,MTU 指数据帧中有效载荷的最大长度,不包括帧首部的长度 ...

  7. NSOperation与GCD的如何选择?

    iOS开发的多线程实现方式,大概包括C的原始方式.NSThread方式.GCD.NSOperation的方式. 其中用的最多的应该是GCD和NSOperation的方式,很多第三方库都是使用了这两种方 ...

  8. Sqoop1.99.7将MySQL数据导入到HDFS中

    准备 本示例将实现从MySQL数据库中将数据导入到HDFS中 参考文档: http://sqoop.apache.org/docs/1.99.7/user/Sqoop5MinutesDemo.html ...

  9. centos安装SWFtools服务(pdf2swf)

    第一步:下载swftools-0.9.2.tar.gz 第二步:swftools tar -xzvf swftools-0.9.2.tar.gz cd swftools-0.9.2 ./configu ...

  10. [Linux 使用(1)] SUSE Linux Enterprise Server 下虚拟机ip设置

    1.找到需要设置的地方 2.设置静态ip 下一步 3.编辑DNS 4.设置默认网关 5.查看ip 6.本机测试是否能够ping通