纯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 相关文章推荐
jquery简单实现幻灯片的方法
Aug 03 Javascript
精通JavaScript的this关键字
May 28 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
详解javascript函数写法大全
Mar 25 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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中current、next与reset函数用法实例
2014/11/17 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
详解php的socket通信
2015/08/11 PHP
session 加入redis的实现代码
2016/07/15 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python实现维吉尼亚算法
2019/03/20 Python
Python中字符串与编码示例代码
2019/05/20 Python
python3将变量输入的简单实例
2020/08/19 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
大专生自荐信
2013/10/04 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
计算机软件专业求职信
2014/06/10 职场文书
校园环保标语
2014/06/13 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
华清池导游词
2015/02/02 职场文书
杭白菊导游词
2015/02/10 职场文书
离职证明格式样本
2015/06/12 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang