纯css+js写的一个简单的tab标签页带样式
最近经常要用tab标签页，所以写了一个简单的，以后用的话直接拷贝一个，稍微改改就OK了。
先看效果图： 
接下来看下代码怎么写的吧：
<%@ 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>
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;
}
/**
*
* @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实现的原生态Tab标签页功能【兼容IE6】
本文实例讲述了JavaScript实现的原生态Tab标签页功能.分享给大家供大家参考,具体如下: 标签页是一个很常见的东西,在一些框架中也就很常见的, 但未必所有人都知道怎么写,很多人知道怎么在网上复制一份是真的, 这样不好,往往需要用大量的时间去修改网上复制下来的东西,还不如自己写一份快. 一.基本目标 创建一个如下的标签页,在IE8中与谷歌浏览器中的效果如下,几乎没有区别 谷歌浏览器: IE8: 二.制作过程 1.首先布置好场景,在一个图层内: 图层1~图层4四个超级链接是一个图层,然后各自
-
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
先说一下最土的一种方法: Html: <div class="tab-head"> <h2 id="tab1" onmouseover="changeTab1()" class="selected">1</h2> <h2 id="tab2" onmouseover="changeTab2()">2</h2> <h2 id=
-
js封装tab标签页实例分享
话不多说,请看代码 <html> <head> <title></title> <meta charset="UTF-8"> <style> *{ padding:0; margin:0;} .block{ display:block;} .none{ display:none;} #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50
-
基于JavaScript实现TAB标签效果
js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下 废话不多说了,直接给大家贴代码了: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content=&
-
javascript动态添加删除tabs标签的方法
本文实例讲述了javascript动态添加删除tabs标签的方法.分享给大家供大家参考.具体实现方法如下: <html> <HEAD> <TITLE>网页对话</TITLE> <LINK href="style.css" type=text/css rel=stylesheet> <script> function $(obj) { var o = typeof(obj)=="object" ?
-
js实现的tab标签切换效果代码分享
这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码.点击上面的标题即可实现对应页面的切换功能,非常具有实用价值. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现的tab标签切换效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
-
js(JavaScript)实现TAB标签切换效果的简单实例
一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401- 19991224/loose.dtd"><HTML xmlns="http://www.w
-
JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)
本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU
-
js实现点击切换TAB标签实例
本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-click-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2
-
javascript实现不同颜色Tab标签切换效果
本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码,供大家参考,具体内容如下 具体代码: <html> <head> <title>不同颜色选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css">
-
简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示 源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &