JS实现淡蓝色简洁竖向Tab点击切换效果


Posted in Javascript onOctober 06, 2015

本文实例讲述了JS实现淡蓝色简洁竖向Tab点击切换效果。分享给大家供大家参考。具体如下:

这里介绍一款淡蓝色竖向简洁Tab,选项卡,是很多人都喜欢的一种风格。

运行效果截图如下:

JS实现淡蓝色简洁竖向Tab点击切换效果

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋体"; }
#lib_Tab1_sx{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;}
.lib_tabborder_sx{border:1px solid #95C9E1;}
.lib_Menubox_sx {line-height:28px;position:relative; float:left; width:130px; height:240px;border-right:1px solid #95C9E1;}
.lib_Menubox_sx ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox_sx li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD}
.lib_Menubox_sx li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0;
color:#739242;height:25px;line-height:25px;}
.lib_Contentbox_sx{margin-top:0px; border-top:none;padding:20px; border-left:0; margin-left:130px;}
-->
</style>
<script>
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
 var menu=document.getElementById(name+i);
 var con=document.getElementById("con_"+name+"_"+i);
 menu.className=i==cursel?"hover":"";
 con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
</head>
<body>
<div id="lib_Tab1_sx" class="lib_tabborder_sx">
<div class="lib_Menubox_sx ">
<ul>
  <li id="one1" onclick="setTab('one',1,5)" class="hover">脚本代码</li>
  <li id="one2" onclick="setTab('one',2,5)" >ASP类</li>
  <li id="one3" onclick="setTab('one',3,5)">PHP类</li>  
  <li id="one4" onclick="setTab('one',4,5)">JSP类</li>
  <li id="one5" onclick="setTab('one',5,5)">.NET类</li>
</ul>
</div>
 <div class="lib_Contentbox_sx "> 
  <div id="con_one_1" >脚本列表</div>
  <div id="con_one_2" style="display:none">ASP类更新</div>
  <div id="con_one_3" style="display:none">PHP类更新</div>
  <div id="con_one_4" style="display:none">JSP类更新</div> 
  <div id="con_one_5" style="display:none">ASP.NET类更新</div> 
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
js loading加载效果实现代码
Nov 24 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 #Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 #Javascript
javascript日期格式化方法汇总
Oct 04 #Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 #Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 #Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 #Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php中几种常见安全设置详解
2010/04/06 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP关联链接常用代码
2012/11/05 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
python实现下载指定网址所有图片的方法
2015/08/08 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python协程之动态添加任务的方法
2019/02/19 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
公务员培训自我鉴定
2013/09/19 职场文书
党校毕业心得体会
2014/09/13 职场文书
一份文言文检讨书
2014/09/13 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
服务明星事迹材料
2014/12/29 职场文书
西安导游词
2015/02/12 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
浅谈Python中对象是如何被调用的
2022/04/06 Python