www.qjdy.com-奇迹赌场 > www.qjdy.com > 一个适合新手的竖向的tab选项卡特效例子

原标题:一个适合新手的竖向的tab选项卡特效例子

浏览次数:123 时间:2019-07-19

正文实例陈述了js轻易完成竖向tab选项卡的点子。共享给大家供大家参谋。具体如下:

选项卡攻陷侧边,而内容放在侧面,八个符合新手的竖向的tab选项Carter效例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title>简单js实现tab切换</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">
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>

仰望本文所述对咱们的javascript程序设计有所协助。

你大概感兴趣的篇章:

  • js基于面向对象完成网页TAB选项卡菜单效果代码
  • JS CSS完结的经文tab选项卡效果代码
  • 原生js达成tab选项卡切换
  • 原生javascript完成Tab选项卡切换功能
  • JS达成同一个网页布局滑动门和TAB选项卡实例
  • js达成类似菜单风格的TAB选项卡效果代码
  • jquery插件tytabs.jquery.min.js完结渐变TAB选项卡效果
  • JS达成非符合规律TAB选项卡效果代码
  • JS基于面向对象完结的八个倒定时器功效示例
  • JS基于面向对象实现的选项卡效果示例
  • 上学javascript面向对象 实例解说面向对象选项卡
  • JS使用面向对象本领完结的tab选项卡效果示例

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:一个适合新手的竖向的tab选项卡特效例子

关键词: mg4155娱乐

上一篇:并调用使用自定义指令的代码

下一篇:没有了