纯css+js写的一个简单的tab标签页带样式
纯css+js写的一个简单的tab标签页带样式
发布时间:2017-01-14 来源:查字典编辑
摘要:最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了。先看效果图:接下来看下代码怎么写的吧:一、sp文件e...

最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了。

先看效果图:

1

接下来看下代码怎么写的吧:

一、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>

<ul>

<li><a name="easytab">诗词</a></li>

<li><a name="easytab">百度</a></li>

<li><a name="easytab">360搜索</a></li>

</ul>

<div id="easytab_content_0">

<div>诗词名句“采菊东篱下,悠然见南山。”出自晋代诗人陶渊明的《饮酒》</div>

<div> 饮酒</div>

<div>结庐在人境,而无车马喧。</div>

<div>问君何能尔?心远地自偏。</div>

<div>采菊东篱下,悠然见南山。</div>

<div>山气日夕佳,飞鸟相与还。</div>

<div>此中有真意,欲辨已忘言。</div>

<div>

作品赏析:

“采菊东篱下,悠然见南山”,这是千年以来脍炙人口的名句。

因为有了“心远地自偏”的精神境界,才会悠闲地在篱下采菊,

抬头见山,是那样地怡然自得,那样地超凡脱俗!

这两句以客观景物的描写衬托出诗人的闲适心情,“悠然”二字用得很妙,

说明诗人所见所感,非有意寻求,而是不期而遇。

苏东坡对这两句颇为称道:“采菊之次,偶然见山,初不用意,而境与意会,故可喜也。”

“见”字也用得极妙,“见”是无意中的偶见,南山的美景正好与采菊时悠然自得的心境相映衬,合成物我两忘的“无我之境”。

如果用“望”字,便是心中先有南山,才有意去望,成了“有我之境”,就失去了一种忘机的天真意趣。

南山究竟有什么胜景,致使诗人如此赞美呢?

接下去就是“山气日夕佳,飞鸟相与还”,这也是诗人无意中看见的景色,

在南山那美好的黄昏景色中,飞鸟结伴飞返山林,万物自由自在,适性而动,

正像诗人摆脱官场束缚,悠然自在,诗人在这里悟出了自然界和人生的真谛。

“此中有真意,欲辨已忘言。”诗人从这大自然的飞鸟、南山、夕阳、秋菊中悟出了什么真意呢?

是万物运转、各得其所的自然法则吗?是对远古纯朴自足的理想社会的向往吗?是任其自然的人生哲理吗?

是直率真挚的品格吗?诗人都没有明确地表示,只是含蓄地提出问题,让读者去思考,而他则“欲辨己忘言”。

如果结合前面“结庐在人境,而无车马喧”来理解,“真意”我们可以理解为人生的真正意义,

那就是人生不应该汲汲于名利,不应该被官场的龌龊玷污了自己自然的天性,而应该回到自然中去,去欣赏大自然的无限清新和生机勃勃!

当然,这个“真意”的内涵很大,作者没有全部说出来,也无须说出来,这两句哲理性的小结给读者以言已尽而意无穷的想象余地,令人回味无穷。

</div>

</div>

<div id="easytab_content_1">

<iframe width="100%" height="100%" frameborder="0" scrolling="auto" src="http://www.baidu.com"></iframe>

</div>

<div id="easytab_content_2">

<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教程学习
编程开发子分类