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


Posted in Javascript onMay 04, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
Angularjs过滤器使用详解
May 25 Javascript
js选择器全面解析
Jun 27 Javascript
原生js简单实现放大镜特效
May 16 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
吃通javascript正则表达式
Apr 21 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 #Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 #Javascript
js检测判断日期大于多少天的方法
May 04 #Javascript
jQuery实现表格展开与折叠的方法
May 04 #Javascript
JS数字抽奖游戏实现方法
May 04 #Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 #Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 #Javascript
You might like
PHP5 安装方法
2006/10/09 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
运动会四百米广播稿
2014/01/19 职场文书
运动会跳远广播稿
2014/02/04 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
三严三实心得体会范文
2014/10/13 职场文书
典型事迹材料范文
2014/12/29 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
python全面解析接口返回数据
2022/02/12 Python