纯css+js写的一个简单的tab标签页带样式


Posted in Javascript onJanuary 28, 2014

最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了。

先看效果图:
纯css+js写的一个简单的tab标签页带样式 
接下来看下代码怎么写的吧:

一、sp文件easytab.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'tab.jsp' starting page</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<link rel="stylesheet" type="text/css" href="<%=path%>/resources/easytab/css/grey.css"> 
<script src="<%=path%>/resources/easytab/js/easytab.js" type="text/javascript"></script> 
</head> 
<body> 
<div class="easytab_area"> 
<ul class="easytabs"> 
<li><a name="easytab" class="easytab_active" onclick="tabSwitch2(this,'easytab_content_',0);">诗词</a></li> 
<li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',1);">百度</a></li> 
<li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',2);">360搜索</a></li> 
</ul> 
<div id="easytab_content_0" class="easytab_content"> 
<div style="color:#78bbaf;font-size:14px;">诗词名句“采菊东篱下,悠然见南山。”出自晋代诗人陶渊明的《饮酒》</div> 
<div style="color:blue;font-size:16px;font-weight: bold;"> 饮酒</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">结庐在人境,而无车马喧。</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">问君何能尔?心远地自偏。</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">采菊东篱下,悠然见南山。</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">山气日夕佳,飞鸟相与还。</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">此中有真意,欲辨已忘言。</div> 
<div style="color:#00aaff;font-size:15px;"> 
作品赏析: 
“采菊东篱下,悠然见南山”,这是千年以来脍炙人口的名句。 
因为有了“心远地自偏”的精神境界,才会悠闲地在篱下采菊, 
抬头见山,是那样地怡然自得,那样地超凡脱俗! 
这两句以客观景物的描写衬托出诗人的闲适心情,“悠然”二字用得很妙, 
说明诗人所见所感,非有意寻求,而是不期而遇。 
苏东坡对这两句颇为称道:“采菊之次,偶然见山,初不用意,而境与意会,故可喜也。” 
“见”字也用得极妙,“见”是无意中的偶见,南山的美景正好与采菊时悠然自得的心境相映衬,合成物我两忘的“无我之境”。 
如果用“望”字,便是心中先有南山,才有意去望,成了“有我之境”,就失去了一种忘机的天真意趣。 
南山究竟有什么胜景,致使诗人如此赞美呢? 
接下去就是“山气日夕佳,飞鸟相与还”,这也是诗人无意中看见的景色, 
在南山那美好的黄昏景色中,飞鸟结伴飞返山林,万物自由自在,适性而动, 
正像诗人摆脱官场束缚,悠然自在,诗人在这里悟出了自然界和人生的真谛。 
“此中有真意,欲辨已忘言。”诗人从这大自然的飞鸟、南山、夕阳、秋菊中悟出了什么真意呢? 
是万物运转、各得其所的自然法则吗?是对远古纯朴自足的理想社会的向往吗?是任其自然的人生哲理吗? 
是直率真挚的品格吗?诗人都没有明确地表示,只是含蓄地提出问题,让读者去思考,而他则“欲辨己忘言”。 
如果结合前面“结庐在人境,而无车马喧”来理解,“真意”我们可以理解为人生的真正意义, 
那就是人生不应该汲汲于名利,不应该被官场的龌龊玷污了自己自然的天性,而应该回到自然中去,去欣赏大自然的无限清新和生机勃勃! 
当然,这个“真意”的内涵很大,作者没有全部说出来,也无须说出来,这两句哲理性的小结给读者以言已尽而意无穷的想象余地,令人回味无穷。 
</div> 
</div> 
<div id="easytab_content_1" class="easytab_content"> 
<iframe width="100%" height="100%" frameborder="0" scrolling="auto" src="http://www.baidu.com"></iframe> 
</div> 
<div id="easytab_content_2" class="easytab_content"> 
<iframe width="100%" height="100%" frameborder="0" scrolling="auto" src="http://www.so.com"></iframe> 
</div> 
</div> 
<script type="text/javascript"> 
document.getElementsByName("easytab")[0].click();//页面加载完成后,点击第一个标签 
</script> 
</body> 
</html>

二、样式文件grey.css
body { 
background-color:#ccc; 
margin:40px; 
} 
.easytab_area { 
border:1px solid #494e52; 
background-color:#636d76; 
padding:8px; 
} 
ul.easytabs { 
margin:16px 0; 
padding:0 0 0 1px; 
} 
ul.easytabs li { 
list-style:none; 
display:inline; 
} 
ul.easytabs li a { 
background-color:#464c54; 
color:#ffebb5; 
padding:16px 14px; 
text-decoration:none; 
font-size:14px; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-weight:bold; 
border:1px solid #464c54; 
} 
ul.easytabs li a:hover { 
background-color:#2f343a; 
border-color:#2f343a; 
} 
ul.easytabs li a.easytab_active { 
background-color:#ffffff; 
color:#282e32; 
border:1px solid #464c54; 
border-bottom: 2px solid #ffffff; 
} 
.easytab_content { 
background-color:#ffffff; 
padding:10px; 
height:400px; 
}

三、js文件easytab.js
/** 
* 
* @param _this 所点击的tab标签 
* @param content_prefix tab标签所对应div的id前缀。注:这里要求所有的前缀必须一样。 
* @param active 所要激活div的id最后的数字。注:这里要求数字必须从零开始,依次增1. 
*/ 
function tabSwitch2(_this,content_prefix,active) { 
var tabs = document.getElementsByName(_this.name); 
var number = tabs.length; 
for (var i=0; i < number; i++) { 
var tab = tabs[i]; 
tab.className = ""; 
document.getElementById(content_prefix+i).style.display = 'none'; 
} 
_this.className = "easytab_active"; 
document.getElementById(content_prefix+active).style.display = 'block'; 
}

就是以上这些了。最后总结一下:

一、样式还可以优化,比如加一些背景图片。
二、这里的tab标签是一次加载所有tab页,然后,点击哪个tab页就显示哪个,其它的隐藏。其实可以把tab页的内容都设置为iframe,然后动态给其设置src的值,就可以达到点哪个就刷新哪个内容了。

Javascript 相关文章推荐
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 #Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 #Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 #Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 #Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 #Javascript
JS判断两个时间大小的示例代码
Jan 28 #Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 #Javascript
You might like
一个颜色轮换的简单例子
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php与paypal整合方法
2010/11/28 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2015年党员自评材料
2014/12/17 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
Promise静态四兄弟实现示例详解
2022/07/07 Javascript
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis