当我们用锚点定位到页面某个元素时,接下来按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. CentOS 引导 Win10 启动项

    因为无聊,所以想尝试一下双系统,所以在win10的基础之上,装了一个Linux系统,之前装过Ubuntu,几乎都是自动完成的无任何压力.但是想着Ubuntu好像更新换代有点快,所以换了个能用比较久的C ...

  2. The Moving Points hdu4717

    The Moving Points Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  3. 在CentOS6上配置MHA过程全记录

    在CentOS6上配置MHA过程全记录 MHA(Master High Availability)是一款开源的MariaDB or MySQL高可用程序,为MariaDB or MySQL主从复制架构 ...

  4. IDE快捷键

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

  5. nginx 部署

    安装nginx 1)安装pcre 从pcre的官网下载tar.gz包,官网地址为:https://sourceforge.NET/projects/pcre/files/pcre/,在这里我下载的是: ...

  6. Entity Framework 之Code First自动数据迁移

    using MvcShopping.Migrations; using MvcShopping.Models; using System; using System.Collections.Gener ...

  7. C#一款比较美观的验证码

    using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System. ...

  8. Telerik RadGridView动态增删行及行列操作

    最近使用一直使用第三方控件Telerik,版本 2011 Q1,一直使用显示控件RadGridView,使用起来比DataGird好使, 也发现有控件问题. 1.增行 RadGridView中使用Be ...

  9. jquery系列教程4-事件操作全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  10. [ZJOI2005]九数码游戏

    [ZJOI2005]九数码游戏 题目描述 输入输出格式 输入格式: 输入文件中包含三行三列九个数,同行的相邻两数用空格隔开,表示初始状态每个方格上的数字.初始状态不会是目标状态. 输出格式: 如果目标 ...