纯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 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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巧获服务器端信息
2006/12/06 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
Nginx实现反向代理
2017/09/20 Servers
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python简单操作excle的方法
2018/09/12 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
作风大整顿心得体会
2014/09/10 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
个人廉政承诺书
2015/04/28 职场文书
2015年加油站工作总结
2015/05/13 职场文书
复活读书笔记
2015/06/29 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL