脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js竖向tab选项卡

js简单实现竖向tab选项卡的方法

 更新时间：2015年05月04日 15:41:00   投稿：shichen2014  
这篇文章主要介绍了js简单实现竖向tab选项卡的方法,涉及javascript实现tab切换效果的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了js简单实现竖向tab选项卡的方法。分享给大家供大家参考。具体如下：

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

<!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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 微信小程序中实现手指缩放图片的示例代码

    微信小程序中实现手指缩放图片的示例代码

    本篇文章主要介绍了微信小程序中实现手指缩放图片的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 一段批量给页面上的控件赋值js

    一段批量给页面上的控件赋值js

    一次性给页面上的控件赋值，控件的ID和数据库表字段对应一样，这样就一次性搞定了
    2010-06-06
  • 一道面试题引发的对javascript类型转换的思考

    一道面试题引发的对javascript类型转换的思考

    本文主要介绍了javascript类型转换的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript实现表单验证示例

    JavaScript实现表单验证示例

    这篇文章主要为大家详细介绍了JavaScript实现表单验证示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • Select下拉框模糊查询功能实现代码

    Select下拉框模糊查询功能实现代码

    这篇文章主要介绍了Select下拉框模糊查询功能实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • js实现移动端轮播图效果

    js实现移动端轮播图效果

    这篇文章主要为大家详细介绍了js实现移动端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • javascript实现5秒倒计时并跳转功能

    javascript实现5秒倒计时并跳转功能

    这篇文章主要为大家详细介绍了javascript实现5秒倒计时并跳转功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • JavaScript多图片上传案例

    JavaScript多图片上传案例

    JS上传多图片例子，为了更人性化，不要固定初始化时的个数，可以通过由用户决定上传图片的个数，即是动态地创建上传图片文框和按钮的个数，感兴趣的小伙伴们可以参考一下
    2015-09-09
  • JavaScript实现矩形块大小任意缩放

    JavaScript实现矩形块大小任意缩放

    这篇文章主要为大家详细介绍了JavaScript实现矩形块大小任意缩放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 使用JavaScript动态设置样式实现代码及演示动画

    使用JavaScript动态设置样式实现代码及演示动画

    使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现，本文有利于巩固你js与css方面的知识，感兴趣的你可以了解下哦，希望本文对你有所帮助
    2013-01-01

最新评论