`
lirihong
  • 浏览: 7527 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript实现tab之间的转换问题

阅读更多

今天搞了一个用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(选种为黄色,未选种为折白色).

 

1
0
分享到:
评论

相关推荐

    js 实现 Enter键实现Tab键功能

    js 实现 Enter键实现Tab键功能! 值得下载看看!资源免费,大家分享!!

    js实现的 tab控件

    1、使用javascript实现的tab 控件,能动态加载数据。 2、使用反射实现了 将从数据库查询出来的数据集转换成对象集合的功能,功能强大,通用性好,可以为程序员减少负担,节省时间。 求大侠 能给出对tab控件修改的...

    面向对象tab转换、编辑.rar

    javaScript进阶面向对象ES6 : 面向对象tab栏切换(先删除所有选项卡操作再设置选中的选项卡)、添加(先创建元素再追加元素到对应的父元素里面)、删除(阻止冒泡防止触发点击事件 根据索引号删除对应的选项及内容 ...

    tab控件 动态加载数据

    使用javascript实现的tab 控件,能动态加载数据。 使用反射实现了将从数据库 查询出来的数据集 字段转换成 对象集合的功能, 可以为程序员减少负担,节省了时间 求大侠 能给出对tab控件修改的意见。多么希望这个...

    程序天下:JavaScript实例自学手册

    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 状态栏文字...

    tab html 代码

    用javascript编写的tab 页面转换

    《程序天下:JavaScript实例自学手册》光盘源码

    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表格的方法

    本文实例讲述了JavaScript实现将xml转换成html table表格的方法。分享给大家供大家参考。具体如下: function ConvertToTable(targetNode) { // if the targetNode is xmlNode this line must be removed // i ...

    精通JavaScript+jQuery Part1

     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 ...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    mithril-template-converter:秘银HTML到JavaScript转换器

    秘银HTML到JavaScript转换器 在线转换器 模板制作器 辅助函数可从HTML创建Mithril模板。 使用输出文本将其复制粘贴到您的源代码中。 /** * @param { object } opts * @param { string } opts.source - String ...

    share2QR:将当前 firefox tab url 转换为二维码,url 包裹在 iframe 标签中

    分享二维码将当前 firefox tab url 转换为二维码,url 包裹在 iframe 标签中

    [removed]由Zell策划的有用JavaScript代码片段的集合

    JavaScript 我整理了我使用JavaScript资料的集合。 希望您发现它们有用! 安装 用这个: npm install @zellwk/javascript 然后导入所需的任何实用程序。 一切清单 仅浏览器 -查找可聚焦元素 -获取1rem和1em值的...

    brackets-tab-tags:括号扩展,当在HTML或XML标记中按ENTER时自动添加选项卡

    在HTML / XML, ()在JavaScript / PHP和{}和()在CSS /更少/ SCSS),那么当你按下ENTER将被转换为: &lt; tag&gt; |&lt;/ tag&gt; function my_function ( |) { } body { |}@media ( |) {}计划使用Preferences API可以让用户设置...

    ColorTab:用于构建ColorTab Web应用程序的文件

    使用具有自定义字体的javascript的单个文件html Web应用程序,以创建名为ColorTab的新的紧凑音乐符号系统。 可以从文本文件或复制/粘贴中输入常规的ascii吉他制表法,并将其转换为新的符号。 音乐符号调色板中包含...

    asp.net知识库

    实现C#和VB.net之间的相互转换 深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP...

    asp.net专家疑难解答200问源码

    22.如何实现从服务器端向页面动态添加javascript脚本-示例1 22.如何实现从服务器端向页面动态添加javascript脚本-示例2 24.如何处理多页面重定向到同一页面后的返回问题 25.如何用Response.Redirect方法传递汉字 ...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    字符编码转换详解 函数与函数式编程 函数式编程之参数详解 局部变量与全局变量作用域 递归 函数式编程与函数不同 高阶函数 第4周 上节内容回顾 心灵鸡汤 装饰器详解 装饰器应用详解 装饰器之函数即变量 装饰器之高...

    asp.net专家疑难解答200问

    如何实现从服务器端向页面动态添加javascript脚本-示例1 22.如何实现从服务器端向页面动态添加javascript脚本-示例2 24.如何处理多页面重定向到同一页面后的返回问题 25.如何用Response.Redirect方法...

Global site tag (gtag.js) - Google Analytics