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 相关文章推荐
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
vue动态设置页面title的方法实例
Aug 23 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 curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python线程的两种编程方式
2015/04/14 Python
遗传算法之Python实现代码
2017/10/10 Python
python调用webservice接口的实现
2019/07/12 Python
python集合能干吗
2020/07/19 Python
python xlsxwriter模块的使用
2020/12/24 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
汽车装潢店创业计划书范文
2014/02/05 职场文书
霸气队列口号
2014/06/18 职场文书
贷款承诺书
2015/01/20 职场文书
小学运动会开幕词
2015/01/28 职场文书
研究生导师推荐信
2015/03/25 职场文书
公司放假通知范文
2015/04/14 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
小学体育课教学反思
2016/02/16 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
Nginx 匹配方式
2022/05/15 Servers