一个简单的tab标签页，纯css+js写的，带样式

淩亂°似流年 2022-08-24 14:07 105阅读 0赞

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

先看效果图：

![SouthEast][]

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

一、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" οnclick="tabSwitch2(this,'easytab_content_',0);">诗词</a></li>
    			    <li><a name="easytab" οnclick="tabSwitch2(this,'easytab_content_',1);">百度</a></li>
    			    <li><a name="easytab" οnclick="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的值，就可以达到点哪个就刷新哪个内容了。

[SouthEast]: /images/20220824/3c7867549caa45fe9de12ca6e4c44455.png