当我们用锚点定位到页面某个元素时,接下来按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. BZOJ-1050-[HAOI2006]旅行comf(并查集)

    Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求 一条路径,使得路径上最 ...

  2. 模糊搜索神器fzf

    前言 fzf是目前最快的fuzzy finder.使用golang编写.结合其他工具(比如ag和fasd)可以完成非常多的工作. 让你通过输入模糊的关键词就可以定位文件或文件夹.当你的思维也习惯了模糊 ...

  3. UI自动化测试简介及Selenium工具的介绍和环境搭建

    自动化测试简介 1.1何为自动化测试? 是把以人为驱动的测试转化为机器执行的一种过程,它是一种以程序测试程序的过程.换言之,就是以程序实现的方式来代替手工测试. 1.2自动化测试分类 分为功能自动化测 ...

  4. Python文件读写模式

    r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须存在.可读,可写,可追加. w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会消失.若文件不存在则建立该文件. w+ 打 ...

  5. M-移动端的webapp页面布局教程和webapp实战分析

    http://www.25xt.com/html5css3/8092.html 响应式设计 1 媒体查询 适用于不同固定宽度设计 媒体类型 : screen 屏幕 print 打印机 handheld ...

  6. ZOJ2402 Lenny's Lucky Lotto List 简单DP

    Lenny's Lucky Lotto Lists Time Limit: 2 Seconds      Memory Limit:65536 KB Lenny likes to play the g ...

  7. 扩展js,实现c#中的string.format方便拼接字符串

    //"{0}-{1}-{2}".format("xx","yy","zz") //显示xx-yy-zz String.p ...

  8. 实验:实现https

    实现https 环境 1.三台主机分别为A,B,C. 2.A主机设置为CA和DNS服务器,ip为192.168.213.129 3.B主机为client,ip为192.168.213.253 4.C主 ...

  9. 【特效】页面滚动到相应位置运行css3动画

    请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...

  10. chromium源码阅读--进程的Message Loop

    上一篇总结了chromium进程的启动,接下来就看线程的消息处理,这里的线程包含进程的主进程. 消息处理是由base::MessageLoop中实现,消息中的任务和定时器都是异步事件的. 主要如下几点 ...