通过js制作竖向的tab选项卡切换显示不同内容的特效例子

稿源：互联网 2018-09-03 02:33:23 点击： 16357 撤稿纠错

选项在占据左边，而内容放在右边，一个适合新手的竖向的tab选项卡特效例子

以下讨论的是和tab 选项卡竖向相关的通过js制作竖向的tab选项卡切换显示不同内容的特效例子教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<style type="text/css">

*{
margin:0;padding:0;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;



}
.container{
margin:0 auto;
width:500px;
overflow:hidden;

background:beige;
}


li{

border-top:1px solid lightgrey;
border-left:1px solid lightgrey;
border-right:1px solid lightgrey;
height:35px;
line-height:35px;
list-style:none;
text-align:center;
width:100px;

}
li:last-child{
height:159px;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey;
}
li.active {

border-right:1px solid white;background:white;

}
li.normal {

border-right:1px solid white;background:red;

}
#tab_content{

float:right;
width:400px;
*width:394px;
background:white;
height:300px;
overflow:hidden;
border-top:1px solid lightgrey;
border-right:1px solid lightgrey;
border-bottom:1px solid lightgrey;
border-left:0px solid lightgrey;
}
#tab_content .content{

  padding: 15px;
    -moz-border-radius: 5px;
height:300px;
    

}
</style>

</head>
<body>


<div class='container' >

 <div id="tab_content">
 
 <div id="a" class="content">

aaaaa
  </div>
   <div id="b" class="content">

bbbbb
  </div>
 <div id="c" class="content">

cccccc
  </div>
 <div id="d" class="content">

Gumby
A responsive 960 grid from Digital Surgeons
Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20140315 Firefox/24.0 PaleMoon/24.4
Gumby
A responsive 960 grid from Digital Surgeons
Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20140315 Firefox/24.0 PaleMoon/24.4
Gumby
A responsive 960 grid from Digital Surgeons
Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20140315 Firefox/24.0 PaleMoon/24.4
Gumby
A responsive 960 grid from Digital Surgeons
Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20140315 Firefox/24.0 PaleMoon/24.4
Gumby
A responsive 960 grid from Digital Surgeons
Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20140315 Firefox/24.0 PaleMoon/24.4
Gumby
A responsive 960 grid from Digital Surgeons
Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20140315 Firefox/24.0 PaleMoon/24.4
DDDDDDDDDDDDDDd
  </div>
</div> 
<div >
<ul id='tabnav'><li ><a href="#a" >A</a></li>
<li class='active'><a href="#b" >B</a></li>
<li><a href="#c" >C</a></li>
<li><a href="#d" >D</a></li>
<li ><a href="#d" ></a></li>
</ul>

</div>

</div>  
<script type="text/javascript">
function changeStyle(){
 this.onclick=function(){
   var list=this.parentNode.childNodes;
   for(var i=0;i<list.length;i++){
        if(1==list[i].nodeType &&  'active'==list[i].className) {
                list[i].className="";
        }
   }
 this.className='active';
 }


}

 var tabs=document.getElementById('tabnav').childNodes;
 for(var i=0;i<tabs.length;i++){
    if(1==tabs[i].nodeType){
       changeStyle.call(tabs[i]);
    }
}



</script>
</body>
</html>

关于通过js制作竖向的tab选项卡切换显示不同内容的特效例子的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090393008.shtml方便下次再访问哦。

·上一篇： 完美兼容多类型浏览器的两栏式DIV+CSS布局样式
·下一篇： 用JQUERY实现的可拖动左右摆放，随意移动位置的图层特效

通过js制作竖向的tab选项卡切换显示不同内容的特效例子

文章分类LIST >>返回首页

最新游戏

最新新闻