JS实现仿Windows经典风格的选项卡Tab切换代码
本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码。分享给大家供大家参考，具体如下：
这款仿Windows风格的选项卡，带有灰色的立体感，示例内容是用JS控制输出，只是为了演示功能，你在用的时候完全可以去掉的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-f-windows-style-tab-demo/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
body{
background-color:#CCC;
}
.tab{
margin:0;
padding:0;
position:absolute;
}
.tab li{
float:left;
list-style:none;
}
.tab li span{
float:left;
display:block;
height:20px;
line-height:20px;
position:relative;
border-style:solid;
border-width:1px 1px 0 1px;
border-color:#EEE #999 #777 #DDD;
background-color:#CCC;
margin:1px 2px 0 0;
padding:0 5px 0 5px;
font-size:12px;
cursor:pointer;
z-index:1;
}
.tab li div{
display:none;
position:absolute;
top:22px;
left:0px;
background-color:#CCC;
border:1px solid;
border-color:#EEE #999 #777 #DDD;
text-align:center;
overflow:auto;
}
.tab li.selected span{
margin-top:0;
height:22px;
}
.tab li.selected div{
display:block;
}
</style>
<script type="text/javascript">
function CreateTab(tab_width,tab_height,parent_obj){
var newtab=document.createElement("UL");
newtab.className="tab";
parent_obj.appendChild(newtab);
Tab.call(newtab);
newtab.style.width=tab_width+"px";
newtab.style.height=tab_height+"px";
return newtab;
}
function Tab(){
var this_tab=this;
this.selected_page;
this.page_names=new Array();
this.page_contents=new Array();
this.Select=function(){
this_tab.selected_page.className="";
this.className="selected";
this_tab.selected_page=this;
}
this.NewPage=function(page_name){
var newpage=document.createElement("LI");
newpage.onclick=this.Select;
newpage.innerHTML="<span>"+page_name+"</span><div></div>";
this.appendChild(newpage);
newpage.lastChild.style.width=parseInt(this.style.width)-2+"px";
newpage.lastChild.style.height=parseInt(this.style.height)-24+"px";
this.page_names.push(newpage.firstChild);
this.page_contents.push(newpage.lastChild);
return newpage;
}
this.SetChecked=function(page_index){
if(page_index>-1&&this.childNodes.length>page_index){
this.selected_page=this.childNodes[page_index];
this.selected_page.className="selected";
}
}
}
</script>
</head>
<body>
<script type="text/javascript">
var newtab=CreateTab(400,300,document.body);
newtab.NewPage("第一页");
newtab.NewPage("第二页");
newtab.NewPage("第三页");
newtab.NewPage("第四页");
newtab.NewPage("第五页");
newtab.SetChecked(0);
newtab.style.top="100px";
newtab.style.left="200px";
for(var i=0;i<newtab.childNodes.length;i++){
newtab.page_contents[i].innerHTML=function(number){
var content_str="";
for(var n=0;n<1;n++){
content_str+="<br />---------------这是第"+number+"页---------------";
}
return content_str;
}(i+1);
}
</script>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JS封装的选项卡TAB切换效果示例
本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}
-
JS实现简单的tab切换选项卡效果
本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <m
-
div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒222．． 这里是内容撒．222．． 这里是内容撒．222．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．444．． 这里是内容撒．44
-
jQuery插件zepto.js简单实现tab切换
老规矩,先贴代码 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('active');
-
JS使用面向对象技术实现的tab选项卡效果示例
本文实例讲述了JS使用面向对象技术实现的tab选项卡效果.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: html: <ul class="scrollUl"> <li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external
-
JS实现的tab切换选项卡效果示例
本文实例讲述了JS实现的tab切换选项卡效果.分享给大家供大家参考,具体如下: <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid:string 当前被激活菜单的id; 2.otherids:Array() 其它未被激活的id; 3.tabclasses:Array() tab被激活时的样式类+tab未被激活时的样式类,存储两个值即可 */ function
-
javascript仿126邮箱TAB切换效果
简洁Tab 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
基于jquery的tab切换 js原理
html代码: 复制代码 代码如下: <div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3
-
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果.分享给大家供大家参考.具体如下: 这是一款可在同一页面中多次调用的TAB选项卡代码,仿百度风云榜的TAB切换效果,用到了几张修饰图片,请顺着代码下载所需的图片,然后上传到你的网站中,修改代码内的路径就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PUBL
-
基于JavaScript实现Tab选项卡切换效果
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: 500px; height: 400px
-
javascript的tab切换原理与效果实现方法
本文实例讲述了javascript的tab切换原理与效果实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <style type="text/css"> #container{border:solid 1px green;width:300px;height:300px;} li{float:left;margin-left:20px;} p{float:left;} #sports,#milit
-
跨浏览器通用、可重用的选项卡tab切换js代码
由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过
-
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
本文实例讲述了JS实现图文并茂的tab选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h
-
一个js的tab切换效果代码[代码分离]
支持自动播放 可定义鼠标事件延迟 不限制html结构 假设HTML如下: 复制代码 代码如下: <ul> <li id="t1">tab1</li> <li id="t2">tab2</li> <li id="t3">tab3</li> </ul> <div id="c1">content1</div> &l