完善tab页面定位
<a href="#content">Skip to Content</a>
<!-- other links -->
<div id="content">
    <!-- your content here -->
</div>但是chrome 和 ie 有问题,按tab是选中 skip to Content之后的那个连接,修复方法就是在定位之后选中 content,通过修改 tabIndexwindow.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.安居客 事先声明啊,宏哥没有收他们的广告费啊,纯粹是 ... 
随机推荐
- 基于React Native的移动平台研发实践分享
			转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ... 
- NavigationController的返回按钮自定义
			假设需求时这样: NavigationController下有2个视图,从A视图会Push到B视图,默认情况下,当显示视图B时,视图B的导航bar上会出现返回按钮,按钮标题文字默认为A视图的title ... 
- 认识:ThinkPHP的编译缓存文件~runtime.php
			1.定义单入口文件(index.php) 在单入口index.php中不定义这两项时,会生成编译缓存文件~runtime.php define('RUNTIME_PATH','./App/Temp/' ... 
- java枚举类(enum) 基础知识讲解
			枚举类是在java 5后新增的,可以用于封装常量,并且还可以为常量的使用提供一些方法. 定义枚举类的语法: public enum EnumName{ 成员1(A,B...),成员2(A,B...), ... 
- [mysql]  ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES).
			用mysql -u root -p显示ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YE ... 
- httpd三种MPM的原理剖析
			html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ... 
- 大牛教你用3行HTML代码卡死一台机器
			前言 学习web渗透测试等安全工作的朋友们,想必大部分接触的最早的就是HTML了. 其实学过html的朋友们都知道,html中可以插入JavaScript代码,而对于JavaScript代码,这里就不 ... 
- 详解m4文件
			最近在分析speex代码,发现编译过程中需要的一个speex.m4文件不知道是何方神圣,怀着对未知知识的渴望,跑到 某哥和某基问了一下,算是认识了,为了方便以后经常见面,这里就做个记录吧. M4实际上 ... 
- SqlServer批量备份多个数据库且删除3天前的备份
			/******************************************* * 批量备份数据库且删除3天前的备份 ************************************ ... 
- 怎样让PDM图形列表显示name和code等需要的信息
			1. 工具(TOOLS)-〉显示参数设置(DISPLAY PREFERENCES) 2. 在弹出来的框中选中Content-〉Table 3. 点右下角那个Advanced 按钮 4. 在弹出的框个选 ... 
