`
lirihong
  • 浏览: 7799 次
  • 性别: 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键功能! 值得下载看看!资源免费,大家分享!!

    dlodlovr(实现tab)

    通过CSS媒体查询,可以根据屏幕尺寸调整Tab的布局,如在小屏幕上可能将Tab转换为下拉菜单。 6. ARIA属性 为了确保无障碍性,应使用ARIA(Accessible Rich Internet Applications)属性。例如,`aria-selected`指示...

    js实现的 tab控件

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

    Ext.net Enter实现Tab功能

    在探讨“Ext.net Enter实现Tab功能”的主题时,我们深入剖析了如何利用JavaScript与Ext.net框架结合,将Enter键的功能转换为Tab键的功能,从而在Web应用中提供更灵活、更用户友好的交互体验。 ### 核心概念:Ext...

    javascript_menu_tab的例子

    8. **兼容性处理**:为了确保在各种浏览器中都能正常工作,可能需要使用像jQuery这样的库来处理跨浏览器的差异,或者使用现代JavaScript语法并借助工具进行转换。 总的来说,“javascript_menu_tab”的例子是一个...

    javascript回车完美实现tab切换功能

    javascript实现回车键切换tab功能的知识点涵盖了网页开发中对用户交互行为的处理。在页面中使用表格(tab)进行数据的录入和切换是常见的场景,尤其是在需要填写大量数据的时候。然而,当用户在使用小键盘(如数字小...

    Ajax实现页面Tab效果

    总结来说,通过结合HTML、CSS、JavaScript(Ajax)和PHP,我们可以创建一个功能完善的Tab效果,实现用户在不刷新页面的情况下切换不同内容。这个示例提供了一个基本的框架,你可以根据实际需求进行扩展,如添加更多...

    纵向书签式Tab页

    【标题】:“纵向书签式Tab页”是一种创新的网页设计模式,它将传统的横向Tab页转换为垂直布局,提供了一种独特的用户交互体验。这种设计尤其适用于内容丰富的页面,可以更有效地利用屏幕空间,使用户能清晰地看到每...

    javascript经典特效---javascript代码自动生成.rar

    JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在实现网页动态效果和交互性方面具有重要作用。本资源“javascript经典特效---javascript代码自动生成.rar”显然聚焦于如何利用JavaScript生成代码,以...

    JS面向对象编程实现的Tab选项卡案例详解

    接下来,我们将转换为面向对象的实现。面向对象编程的核心概念包括类(Class)、对象(Object)、属性(Properties)和方法(Methods)。我们可以创建一个名为`Tab`的构造函数,然后在这个构造函数中定义和初始化与...

    简易CSS3 Tab菜单切换.zip

    在网页设计中,Tab菜单是一种常见的用户界面元素,它允许用户在不同的内容区块之间进行切换,而无需重新加载整个页面。CSS3 Tab菜单是利用CSS3的新特性来实现的,可以提供更丰富的视觉效果和交互体验。"简易CSS3 Tab...

    Web页面动态表格数据导入Excel的JavaScript实现.pdf

    在使用 JavaScript 实现 Web 页面动态表格数据的 Excel 导入时,需要使用 ActiveX 对象定义电子表格对象,并根据表格 id 标识将浏览器中的表格对象转换为电子表格对象。然后,使用电子表格对象的 innerTexts 属性将...

    [web设计工具集] tab选项卡特效集

    在Web设计领域,选项卡(Tab)是一种常见的用户界面元素,用于组织和展示大量内容,以提高用户体验。本文将深入探讨“[web设计工具集] tab选项卡特效集”,主要关注js+html实现的选项卡特效,以及如何利用这些特效...

    jQuery Tab选项卡切换_files.rar

    CSS3引入了许多新选择器、边框和背景样式、转换、动画等功能,使得我们可以创建出更加美观且富有动态效果的Tab选项卡。例如,通过CSS3的transition属性可以实现平滑的过渡效果,而transform属性则可以用于旋转、缩放...

    带数字的图文tab切换特效.zip

    总结来说,“带数字的图文tab切换特效”结合了jQuery的owlCarousel插件,通过HTML、CSS和JavaScript的协同工作,实现了富有交互性的页面内容切换。这样的设计不仅提高了用户对内容的浏览效率,还提升了网站的整体...

    css3超酷tab选项卡式页面切换特效

    通过这些CSS3技术的综合运用,"css3超酷tab选项卡式页面切换特效"实现了富有吸引力且用户友好的界面,为网站增加了互动性和视觉冲击力。开发者可以根据实际需求,参考这个示例来创建自己的定制化选项卡切换效果。

    使用HTML+CSS编写一个灵活的Tab页

    在网页设计中,Tab页是一种常见的用户界面元素,它能够帮助组织和展示大量信息,使得用户可以方便地在不同内容间切换。本教程将详细讲解如何使用HTML和CSS来创建一个灵活、响应式的Tab页。 首先,我们需要创建HTML...

    动感图标的网页Tab选项卡导航jQuery版.rar

    【jQuery Tab选项卡导航】是网页交互设计中常见的一种组件,它主要用于组织和展示大量信息,使得用户可以方便地在不同内容之间切换。在“动感图标的网页Tab选项卡导航jQuery版”中,这一功能被赋予了动态效果,提升...

    360度旋转tab标签切换内容

    总结来说,"360度旋转tab标签切换内容"是一种利用CSS3和JavaScript实现的现代UI设计技术,它结合了Win 8的"梅超风"风格和翻牌效果,提供了动态、吸引人的内容切换方式。这种设计不仅提升了用户的视觉体验,也为...

    基于jQuery的简单的tab标签栏切换效果的实现代码.zip

    这个压缩包“基于jQuery的简单的tab标签栏切换效果的实现代码.zip”提供了使用JavaScript库jQuery来创建这种效果的示例代码。jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和动画制作等任务,因此它是...

Global site tag (gtag.js) - Google Analytics