纯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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
Element实现动态表格的示例代码
Aug 02 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
一个很不错的PHP翻页类
2009/06/01 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
关于JS管理作用域的问题
2013/04/10 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
python获取目录下所有文件的方法
2015/06/01 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
详解django中Template语言
2020/02/22 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
教师演讲稿大全
2014/05/16 职场文书
保护环境倡议书500字
2014/05/19 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
创先争优承诺书
2015/01/20 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
门球健将观后感
2015/06/16 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers