完善tab页面定位
<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页面定位的更多相关文章
- html tab页面切换事件。
$(document).bind("visibilitychange",function(e){ //只对tab页面切换有效 //document.visibilityState ...
- 用Fragment制作的Tab页面产生的UI重叠问题
本文出处:http://blog.csdn.net/twilight041132/article/details/43812745 在用Fragment做Tab页面,发现有时候进入应用会同时显示多个T ...
- 使用Intent创建Tab页面
前面已经介绍了如何使用TabActivity来创建Activity布局,前面添加Tab页面使用了TabHost.TabSpec如下方法. setContent(int viewId):直接将指定Vie ...
- windows资源管理器多标签打开 windows文件夹多标签浏览 浏览器tab页面一样浏览文件夹 clover win8 win10 报错 无响应问题怎么解决 clover卡死 clover怎么换皮肤
大家都知道,我们打开一堆文件夹的时候,是什么样子 “厚厚的一叠”图标堆叠在一起的,非常的不方便 那么,是不是可以像浏览器一样的tab页面展示呢? 答案是可以的 安装好就是这样子的 是不是方便漂亮了很多 ...
- confluence 新tab 页面打开 kibana short link
confluence 新tab 页面打开 https://confluence.atlassian.com/confkb/how-to-force-links-to-open-in-a-new-win ...
- Easyui实用视频教程系列---Tree点击打开tab页面
Easyui实用视频教程系列---Tree点击打开tab页面 首先 我们 要搭建环境 easyui 环境 然后 把tree 给创建出来 在某个位置 粘贴 下面代码 <ul id="tt ...
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- 《手把手教你》系列技巧篇(四十五)-java+ selenium自动化测试-web页面定位toast-上篇(详解教程)
1.简介 在使用appium写app自动化的时候介绍toast的相关元素的定位,在Web UI测试过程中,也经常遇到一些toast,那么这个toast我们这边如何进行测试呢?今天宏哥就分两篇介绍一下. ...
- 《手把手教你》系列技巧篇(四十六)-java+ selenium自动化测试-web页面定位toast-下篇(详解教程)
1.简介 终于经过宏哥的不懈努力,偶然发现了一个toast的web页面,所以直接就用这个页面来夯实一下,上一篇学过的知识-处理toast元素. 2.安居客 事先声明啊,宏哥没有收他们的广告费啊,纯粹是 ...
随机推荐
- CentOS 引导 Win10 启动项
因为无聊,所以想尝试一下双系统,所以在win10的基础之上,装了一个Linux系统,之前装过Ubuntu,几乎都是自动完成的无任何压力.但是想着Ubuntu好像更新换代有点快,所以换了个能用比较久的C ...
- The Moving Points hdu4717
The Moving Points Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- 在CentOS6上配置MHA过程全记录
在CentOS6上配置MHA过程全记录 MHA(Master High Availability)是一款开源的MariaDB or MySQL高可用程序,为MariaDB or MySQL主从复制架构 ...
- IDE快捷键
visual studio 中 : /// 快速函数注释 ctrl+k,ctrl+F 格式化代码 Android Studio 中: /**回车 快速函数注释 ctrl+h 查看继承关系 自动格式化 ...
- nginx 部署
安装nginx 1)安装pcre 从pcre的官网下载tar.gz包,官网地址为:https://sourceforge.NET/projects/pcre/files/pcre/,在这里我下载的是: ...
- Entity Framework 之Code First自动数据迁移
using MvcShopping.Migrations; using MvcShopping.Models; using System; using System.Collections.Gener ...
- C#一款比较美观的验证码
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System. ...
- Telerik RadGridView动态增删行及行列操作
最近使用一直使用第三方控件Telerik,版本 2011 Q1,一直使用显示控件RadGridView,使用起来比DataGird好使, 也发现有控件问题. 1.增行 RadGridView中使用Be ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- [ZJOI2005]九数码游戏
[ZJOI2005]九数码游戏 题目描述 输入输出格式 输入格式: 输入文件中包含三行三列九个数,同行的相邻两数用空格隔开,表示初始状态每个方格上的数字.初始状态不会是目标状态. 输出格式: 如果目标 ...