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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
vue实现全选、反选功能
Nov 17 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
Node与Python 双向通信的实现代码
Jul 16 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
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
javascript call和apply方法
2008/11/24 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
python提取内容关键词的方法
2015/03/16 Python
python去掉行尾的换行符方法
2017/01/04 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python面试题小结附答案实例代码
2019/04/11 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
HTML的form表单和django的form表单
2019/07/25 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Python读取实时数据流示例
2019/12/02 Python
详解python with 上下文管理器
2020/09/02 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
文员个人求职自荐信
2013/09/21 职场文书
建筑专业自荐信范文
2014/01/05 职场文书
高校教师思想汇报
2014/01/11 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
大学毕业感言200字
2014/03/09 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
小学生寒假家长评语
2014/04/16 职场文书
业务内勤岗位职责
2014/04/30 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
纪检监察立案决定书
2015/06/24 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
python自动化之如何利用allure生成测试报告
2021/05/02 Python