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 相关文章推荐
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
简单分析javascript中的函数
Sep 10 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
浅谈JS的原型和继承
May 08 Javascript
vue.js实现双击放大预览功能
Jun 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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python基础教程之类class定义使用方法
2014/02/20 Python
python实现连接mongodb的方法
2015/05/08 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
同学会邀请书大全
2014/01/12 职场文书
三年级科学教学反思
2014/01/29 职场文书
迟到早退检讨书
2014/02/10 职场文书
项目总经理岗位职责
2014/02/14 职场文书
内勤主管岗位职责
2014/04/03 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js