纯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 图片预览效果 推荐
Dec 22 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
js实现拖拽效果
Feb 12 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
微信小程序如何实现在线客服功能
Oct 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合并两个数组的两种方式的异同
2012/09/14 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
Django框架中的对象列表视图使用示例
2015/07/21 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python的concat等多种用法详解
2018/11/28 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Python处理session的方法整理
2019/08/29 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
生物技术专业研究生自荐信
2013/09/22 职场文书
工厂厂长的职责
2013/12/12 职场文书
科研课题实施方案
2014/03/18 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
普通话宣传标语
2014/06/26 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
大学军训决心书
2015/02/05 职场文书
生死抉择观后感
2015/06/09 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技