完善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.安居客 事先声明啊,宏哥没有收他们的广告费啊,纯粹是 ...
随机推荐
- hdu3729二分匹配
I'm Telling the Truth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- bzoj3209 花神的数论题 (二进制数位dp)
二进制数位dp,就是把原本的数字转化成二进制而以,原来是10进制,现在是二进制来做,没有想像的那么难 不知到自己怎么相出来的...感觉,如果没有一个明确的思路,就算做出来了,也并不能锻炼自己的能力,因 ...
- S2_SQL_第四章
1.使用EXISTS语句判断该数据库对象是否存在的语法: DROP TABLE IF EXISTS temp; 2. EXISTS作为WHERE语句的子查询: SELECT <字段>FRO ...
- tcpip第三章
1,ip协议不可靠.无连接特性介绍 不可靠:计算机A往计算机B发送数据报1,若途径的路由器缓存已满,或者ttl(time to live 生存周期)到了,则路由器直接丢弃数据包1,并产生icmp数据包 ...
- Vim的基本使用(二)
本文为原创文章,转载请标明出处 目录 11.可视模式 12.指定计数 13.重复命令 14.外部命令 15.命令行编辑 16.文件编辑 17.分割窗口 18.GUI命令 19.配置 20.Vim Ch ...
- XSS跨站脚步攻击及防范
XSS(Cross Site Script)跨站脚本攻击.它指的是恶意攻击者往Web 页面里插入恶 意html 代码,当用户浏览该页之时,嵌入其中Web 里面的html 代码会被执行,从而达到侵害用户 ...
- Quartz入门案例与介绍(与spring整合)
Quartz概述 Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或 ...
- js-location应用
1 location.search ?xxx=sss&yyy=ddd 获取地址中查询的值 /** * 解析url参数 * @example ?id=123456&a=b * @retu ...
- Java高新技术 JavaBean内省
Java高新技术 JavaBean内省 知识概要: (1)了解JavaBean内省 (2)JavaBean的简单内省操作 ...
- iOS音频格式PCM转G711u(或G711a-law)
请尊重作者劳动成果,如需转载本博客文章请注明出处!谢谢合作! inputData是PCM的实时数据,可以通过转码,获取到最后导出的G711u数据(sendData) NSUInteger datal ...