今天搞了一个用js来实现tab之间的转换,很简单的问题,但发现了一个问题。
用JS来改变css样式时,改变<a> </a>的样式会出问题:
<a href="" id = "href_id"></a>
function setSytle(){
document.getElementById("href_id").className = "current";
}
通过这样的方式来改变<a的样式就不能达到想要的效果,到网上搜了一下,实现tab之间的转换都是通过改变div或者<li之类的style来改变效果,于是我每一个tab用span来包起来,通过js来改变span的样式,从而达到了改变转换tab时,高亮显示的效果。
不知道其他人有没有这样的经历,下面是我的方法
function showtab(id,index,count){
for(var i = 1; i<= count;i++){
if(i == index){
this.getObject("tab"+id+index).className = "style_yellow12B";//设置span颜色
this.getObject("tab_"+id+"_"+index).style.display = "block";//显示对应的表格
}else{
this.getObject("tab"+id+i).className = "style_withe12";
this.getObject("tab_"+id+"_"+i).style.display = "none";
}
}
}
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}
使用方法:
1.tab js使用说明:
· 方法:
showtag(id,index,loop);
id 作为table的标识,页面唯一.
index 当前选择是第几个table.
loop 当前循环有几个tab页.
· 使用方法:
table命名为 tab_id_index
页面默认不显示的table style="display: none;"
触发事件使用<span>
span ID 为 tab+id+index
如:<span id="tab11" class="style_yellow12B" onmousemove="showtab(1,1,2)">省内动态</span>
页面默认的<span> class = style_yellow12B 其它 style_withe12(选种为黄色,未选种为折白色).
分享到:
相关推荐
js 实现 Enter键实现Tab键功能! 值得下载看看!资源免费,大家分享!!
1、使用javascript实现的tab 控件,能动态加载数据。 2、使用反射实现了 将从数据库查询出来的数据集转换成对象集合的功能,功能强大,通用性好,可以为程序员减少负担,节省时间。 求大侠 能给出对tab控件修改的...
javaScript进阶面向对象ES6 : 面向对象tab栏切换(先删除所有选项卡操作再设置选中的选项卡)、添加(先创建元素再追加元素到对应的父元素里面)、删除(阻止冒泡防止触发点击事件 根据索引号删除对应的选项及内容 ...
使用javascript实现的tab 控件,能动态加载数据。 使用反射实现了将从数据库 查询出来的数据集 字段转换成 对象集合的功能, 可以为程序员减少负担,节省了时间 求大侠 能给出对tab控件修改的意见。多么希望这个...
7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建(Back Space) 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字...
用javascript编写的tab 页面转换
7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建(Back Space) 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字...
本文实例讲述了JavaScript实现将xml转换成html table表格的方法。分享给大家供大家参考。具体如下: function ConvertToTable(targetNode) { // if the targetNode is xmlNode this line must be removed // i ...
1.3 JavaScript的实现 1.3.1 ECMAScript 1.3.2 DOM 1.3.3 BOM 1.3.4 新的开始 1.4 Web标准 1.4.1 Web标准概述 1.4.2 结构.c表现和行为的分离 第2章ccJavaScript基础 2.1 ...
49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...
49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...
秘银HTML到JavaScript转换器 在线转换器 模板制作器 辅助函数可从HTML创建Mithril模板。 使用输出文本将其复制粘贴到您的源代码中。 /** * @param { object } opts * @param { string } opts.source - String ...
分享二维码将当前 firefox tab url 转换为二维码,url 包裹在 iframe 标签中
JavaScript 我整理了我使用JavaScript资料的集合。 希望您发现它们有用! 安装 用这个: npm install @zellwk/javascript 然后导入所需的任何实用程序。 一切清单 仅浏览器 -查找可聚焦元素 -获取1rem和1em值的...
在HTML / XML, ()在JavaScript / PHP和{}和()在CSS /更少/ SCSS),那么当你按下ENTER将被转换为: < tag> |</ tag> function my_function ( |) { } body { |}@media ( |) {}计划使用Preferences API可以让用户设置...
使用具有自定义字体的javascript的单个文件html Web应用程序,以创建名为ColorTab的新的紧凑音乐符号系统。 可以从文本文件或复制/粘贴中输入常规的ascii吉他制表法,并将其转换为新的符号。 音乐符号调色板中包含...
实现C#和VB.net之间的相互转换 深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP...
22.如何实现从服务器端向页面动态添加javascript脚本-示例1 22.如何实现从服务器端向页面动态添加javascript脚本-示例2 24.如何处理多页面重定向到同一页面后的返回问题 25.如何用Response.Redirect方法传递汉字 ...
字符编码转换详解 函数与函数式编程 函数式编程之参数详解 局部变量与全局变量作用域 递归 函数式编程与函数不同 高阶函数 第4周 上节内容回顾 心灵鸡汤 装饰器详解 装饰器应用详解 装饰器之函数即变量 装饰器之高...
如何实现从服务器端向页面动态添加javascript脚本-示例1 22.如何实现从服务器端向页面动态添加javascript脚本-示例2 24.如何处理多页面重定向到同一页面后的返回问题 25.如何用Response.Redirect方法...