`
jackeysion
  • 浏览: 129581 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

简单的js模拟tab选项卡

阅读更多
本想做成一个扩展性好的,结果做来做去总是不理想 , 慢慢来吧 , 先把做好的保存一下 ,
css很粗糙....
<html>
<head>
<title>
</title>
<style type="text/css">
<!--
#TabPage{
  position:absolute;
  left: 400px;
  top: 200px;
  height: 400px;
  width: 300px;
  border-color: blue;
  border: solid 1px;
  background-color: lightblue;
}
#Tab{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 30px;
  border-color: red;
  border: solid 1px;
  font-size: 12px;
  color: blue;
}
.subTab{
	float: left;
	width: 60px;
	height:100%; 
}
#Page{
  position: absolute;
  left: 0;
  top: 31px;
  width: 100%;

  border-color: black;
  border:solid 1px;
  background-color: white;
}
-->
</style>
<script type="text/javascript">
<!--
  var str = "";
  var zIndex = 0;
  var tabpage;
 /* function _Tab(tabName){
    this.Nodes = [];
    this.tabName = tabName;
  }
  function _Page(pageName){
    this.pageName = pageName;
    this.Nodes = [];
  }*/
  function _TabPage(){
    //tabpage有两个子数组, 分别标识有几个tab和page,以及其对应关系.根据索引对应.
    this.tabs = [];
    this.pages = [];
  }
  function _Tab (id ,title ,url ){ 
    this.id = id;
    this.title = title; 
    this.url = url; 
  }
  function _Page (id , title , tabId){
    this.id = id;
    this.title = title;
    this.tabId = tabId;
  }
  
  _TabPage.prototype.add = function(_tab , _page){
    if(!_tab || !_page) return;//如果有一个为空 , 就不用做操作了.
    //initpage.
    var tab = document.createElement("div");
    tab.id = _tab.id;  
    //添加鼠标经过事件 , 
    //tab.onmouseover = function (tabId){this.showCurrentPage();};
    tab.attachEvent('onmouseover',function(){
			var srcE = event.srcElement;
			var tabId = srcE.id; 
		    for(var i = 0 ; i < $('Page').childNodes.length ;i++){ 
		  		$('Page').childNodes[i].style.display = 'none'; 
		  	}
		  	for(var i = 0 ; i <$('Page').childNodes.length;i++){ 
		  		if(tabId ==  $('Page').childNodes[i].tabId){
		  			$('Page').childNodes[i].style.display = 'block';
		  			return;
		  		}
	  		}
  		}
  	);  

    if(_tab.className) tab.className = _tab.className;
    else tab.className = 'subTab';
    //tab.innerHTML = _tab.url ? '<a href="' + _tab.url + '">' + _tab.title + '</a>' : _tab.title;
    tab.innerHTML = _tab.title;
    this.tabs[this.tabs.length] = _tab; 
    document.getElementById('Tab').appendChild(tab);
    
    var page = document.createElement("div");
    page.id = _page.id;
    page.tabId = _page.tabId;
    if(_page.className) page.className = _page.className; 
    page.innerHTML = _page.title; 
    page.style.display = 'none';
    this.pages[this.pages.length] = page;  
    document.getElementById('Page').appendChild(page);
 	
 	this.pages[0].style.display = 'block';
  }
 
  function createTabPage(id ,title , url){ 
  
    var tab = new _Tab(id ,title,url);
    //page中的内容应该是一个jsp页面. 
    var page = new _Page('p1','内容' + (zIndex++) , tab.id);
  
    tabpage.add(tab , page);
  }
  function page_init(){
    tabpage = new _TabPage();
    $('Page').style.height = $('TabPage').offsetHeight - $('Tab').offsetHeight; 
    createTabPage('0','个人信息','./empInfo.do?method=');
    createTabPage('1','单位信息','./empInfo.do?method=');
  }
  function $(id){
    return document.getElementById(id);
  }
  //显示当前tab对应的page
  _TabPage.prototype.showCurrentPage=function (tabId){ 
  	
  	alert(tabId);
  	for(var i = 0 ; i < $('Page').childNodes.length ;i++){ 
  		$('Page').childNodes[i].style.display = 'none';
  		alert($('Page').childNodes[i].tabId);
  	}  
  	
  	for(var i = 0 ; i <  $('Page').childNodes.length ;i++){
  		if(tabId ==  $('Page').childNodes[i].tabId){
  			$('Page').childNodes.length = 'block';
  			return;
  		}
  	}
  }
  window.onload = page_init;
//-->
</script>
</head>
<body >
  <div id="TabPage" class="TabPage">
    <div id="Tab" class="Tab">
    </div>
    <div id="Page" class="Page">
    </div>
  </div>
</body>
</html>
分享到:
评论

相关推荐

    js tab 选项卡

    在JavaScript编程中,"js tab 选项卡"是一种常见的用户界面元素,用于组织和展示大量信息。选项卡设计允许用户通过点击不同的标签来切换不同内容的显示区域,从而提高网页的可读性和交互性。本封装的选项卡功能具有...

    javascript实现简易的tab选项卡切换效果

    本教程将详细介绍如何使用 JavaScript 实现一个简单的选项卡切换效果。 首先,我们需要在HTML中设置选项卡的基本结构。通常,选项卡由两部分组成:一是可见的标签(tab),二是对应的隐藏内容(content)。每个选项...

    jquery tab选项卡插件滑动选项卡淡隐淡现选项卡

    在网页设计中,jQuery Tab选项卡插件是一个广泛使用的交互元素,它允许用户在一个有限的空间内展示多个内容区域,通过切换选项卡实现不同内容的显示。这种设计模式极大地提升了用户体验,尤其是在处理大量信息时,...

    模拟的选项卡

    在IT行业中,尤其是在前端开发领域,选项卡(Tab)是一种常见的用户界面元素,它用于将大量信息组织成可切换的独立部分,以提高用户体验和页面的可读性。本项目中,你分享的是一个使用jQuery实现的模拟选项卡功能的...

    tab选项卡切换效果兼容所有IE内核

    在实现Tab选项卡切换效果时,应考虑性能优化,比如使用事件委托减少事件监听器的数量,或者在不支持CSS3动画的IE浏览器中使用JavaScript进行过渡效果模拟。 通过以上步骤,我们可以在各种IE内核的浏览器上实现Tab...

    jQuery实现Tab选项卡自定义切换方式特效源码.zip

    本资源“jQuery实现Tab选项卡自定义切换方式特效源码.zip”显然是一个包含示例代码的压缩包,用于演示如何使用jQuery创建具有自定义切换效果的Tab选项卡。 首先,让我们深入理解Tab选项卡的基本概念。Tab选项卡是一...

    jQuery上下弹性切换Tab选项卡.zip

    本示例"jQuery上下弹性切换Tab选项卡"是关于如何使用jQuery实现一种独特的Tab切换效果,它允许用户通过上滑和下滑来弹性地浏览不同的内容区域。这种交互方式可以提升用户体验,尤其是在移动设备上,使得内容导航更加...

    简单复古的js选项卡切换样式代码

    本文将详细解析"简单复古的js选项卡切换样式代码"这一主题,探讨如何使用JavaScript实现这种效果。 首先,我们要理解选项卡的基本结构。一个典型的选项卡布局包括两部分:选项卡(tab)和内容面板(content panel)...

    jquery封装Tab标签选项卡,内含动画版选项卡及滑动门

    首先,Tab选项卡是一种组织内容的有效方式,它允许用户在多个相关但独立的视图之间切换,而无需刷新整个页面。在jQuery中实现Tab功能,我们通常会定义一组数据(如段落或div)作为内容区,以及一组链接或按钮作为...

    JQ向上滑动切换Tab选项卡.zip

    本示例“JQ向上滑动切换Tab选项卡”是利用jQuery实现的一种用户界面交互效果,它允许用户通过上滑手势来切换不同的Tab内容。下面我们将详细探讨这一实现涉及的主要技术点。 首先,HTML5是现代网页开发的基础,它...

    模拟新浪腾讯title选项卡

    在IT行业中,尤其是在Android或者Web开发领域,模拟新浪腾讯title选项卡是一项常见的需求,它能够为用户提供更加便捷和直观的交互体验。在这个场景下,"Dialog"被灵活地运用,来模仿微博应用中的选项卡功能。Dialog...

    一个非常漂亮的网页选项卡

    例如,`&lt;div class="tab"&gt;`用于表示选项卡本身,而`&lt;div class="tab-content"&gt;`则包含与每个选项卡关联的具体内容。每个内容区域默认应该是隐藏的,只有当对应的选项卡被选中时才显示。 接着,CSS(层叠样式表)...

    jQuery 实现自动轮换的Tab选项卡

    Tab 基于jQuery实现的TAB选项卡,从外观上来看,与其它的选项卡没有太大差别,不过这里运用了jQuery里模拟鼠标事件的函数:trigger(type,[data]) ,在每一个匹配的元素上触发某类事件,再与setInterval配合,实现了...

    mui上拉加载+选项卡+ajax

    接着,选项卡(Tab)是用户界面设计中的常见元素,用于分隔内容并提供导航。`mui`框架的选项卡组件允许开发者创建可切换的视图,每个视图对应一个独立的内容区域。`mui.tabs()`方法用于初始化选项卡,可以通过监听`'...

    形考任务八 HTML 调用js实现多项滑动门选项卡特效.zip

    在这个项目中,JavaScript将被用来控制HTML元素的显示和隐藏,以模拟选项卡的切换效果。具体来说,JavaScript代码会监听用户的点击事件,当用户点击某个选项卡时,对应的“门”(内容区域)将滑动显示或隐藏,从而...

    前端开发-基于微信小程序的投票页面(包含瀑布流、tab选项卡、弹窗层).zip

    在本文中,我们将深入探讨如何在微信小程序中构建一个功能丰富的投票页面,其中包括瀑布流布局、tab选项卡和弹窗层。微信小程序是一种轻量级的应用框架,它允许开发者为微信用户创建原生体验的应用,而无需安装。...

    vue子路由跳转实现tab选项卡

    在Vue.js中,实现一个带有tab选项卡的后台管理系统通常涉及到路由(vue-router)的使用。Vue Router是Vue.js官方的路由管理器,它能够帮助我们处理应用中的页面导航和状态管理。在这个场景中,我们可以将左侧的导航...

    采用Table CSS实现的TabPane选项卡.rar

    在网页设计中,选项卡(Tab Pane)是一种常见的交互元素,用于组织和展示大量内容,让用户可以方便地在不同部分之间切换。"采用Table CSS实现的TabPane选项卡"是一个利用CSS样式表来构建Tab Pane功能的例子。在这个...

    jquery背景定位属性设置选项卡缓慢滑动淡出淡进显示选项卡内容

    例如,我们可以为每个选项卡设置不同的背景图片,然后在切换选项卡时改变背景位置,模拟滑动效果。 jQuery的动画功能主要通过`.animate()`函数实现。我们可以使用它来改变背景位置,同时结合`.fadeOut()`和`.fadeIn...

    jquery仿京东滑动选项卡特效

    为了模拟京东滑动选项卡的平滑过渡,可以使用`.animate()`方法添加自定义动画效果,比如改变宽度、高度或透明度: ```javascript $(document).ready(function() { var tabWidth = $('#tabs').width(); $('#tabs ....

Global site tag (gtag.js) - Google Analytics