Pure CSS +js to write a simple TAB TAB with style
- 2020-03-30 01:30:04
- OfStack
Recently often want to use TAB page, so wrote a simple, after the use of words directly copy one, a little change on the OK.
First look at the renderings:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201401/201401281534261.gif? 2014028153442 ">
Here's how the code works:
One, sp file easytab.jsp
Grey. CSS
Js file easytab.js
That's all. To conclude:
One, the style can also be optimized, such as adding some background pictures.
Two, the TAB TAB here is a load of all TAB pages, and then, click which TAB page to show which, the rest of the hidden. You can actually set the contents of the TAB page to the iframe, and then dynamically set the SRC value to it, and you can refresh the content at any point.
First look at the renderings:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201401/201401281534261.gif? 2014028153442 ">
Here's how the code works:
One, sp file 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);"> poetry </a></li>
<li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',1);"> baidu </a></li>
<li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',2);">360 search </a></li>
</ul>
<div id="easytab_content_0" class="easytab_content">
<div style="color:#78bbaf;font-size:14px;"> The famous poem "picking chrysanthemum under the east fence, leisurely see the south mountain." From drinking by tao yuanming, a poet of the jin dynasty </div>
<div style="color:blue;font-size:16px;font-weight: bold;"> drinking </div>
<div style="color:blue;font-size:16px;font-weight: bold;"> The knot lu is in the people's land, but has no vehicle horse to shout. </div>
<div style="color:blue;font-size:16px;font-weight: bold;"> Ask you what? The mind is far away from itself. </div>
<div style="color:blue;font-size:16px;font-weight: bold;"> Picking chrysanthemum under the east hedge, leisurely see the south mountain. </div>
<div style="color:blue;font-size:16px;font-weight: bold;"> Mountain gas day and night good, the birds phase with also. </div>
<div style="color:blue;font-size:16px;font-weight: bold;"> There is truth in this, the desire to distinguish has forgotten. </div>
<div style="color:#00aaff;font-size:15px;">
Appreciation of works:
"Picking chrysanthemum under the east hedge, leisurely see the south mountain" , This is a famous sentence that has won universal praise for thousands of years.
Because of the spiritual realm of "the heart is far from the self," he would gather chrysanthemums leisurely under the hedge,
Look up to see the mountain, is so comfortable, so transcendent and free from vulgarity!
These two sentences set off the leisurely mood of the poet by the description of objective scenery.
That what the poet sees and feels, he does not seek, but meets by chance.
Su dongpo to these two sentences very commendable: "pick chrysanthemum of the time, accidentally see the mountain, the beginning is not intended, and the environment and meaning, so gratifying also."
"See" word is also used very well, "see" is accidentally, the beautiful scenery of the south mountain just with the leisurely mood when picking chrysanthemum set off, composite I two forget the "no my state".
If you use the word "hope", is in the heart of the first nanshan, just deliberately to look, became "I have the environment", lost a kind of naive interest to forget the machine.
What is it about nanshan that the poet so praises?
The following is "the mountain is beautiful, and the birds are beautiful", which is also a scene the poet accidentally saw,
In the beautiful evening scenery of nanshan mountain, birds fly back together and all things are free and comfortable.
Just as the poet is free from the shackles of officialdom and at ease, here the poet realizes the true meaning of nature and life.
"There is a real meaning in this. The poet from the nature of the birds, nanshan, the setting sun, qiuju in the realization of what true meaning?
Is it the law of nature that makes everything work and makes everything work? Is it the longing for the primitive and self-sufficient ideal society? Is it the philosophy of life left to itself?
Is it a direct and sincere character? The poet does not explicitly say, but implicitly asks the question, leaving the reader to think, while he "tries to distinguish himself from his words".
If we understand "true meaning" in combination with the previous "living in the people's land, but no vehicle or horse," we can understand "true meaning" as the real meaning of life,
That is, life should not be busy with fame and wealth, should not be dirty by officialdom stained their natural nature, and should go back to nature, to appreciate the infinite freshness and vitality of nature!
Of course, this "true meaning" the connotation is very big, the author did not say all out, also need not say out, these two philosophic summary give the reader with the words have done and meaning infinite imagination room, make a person aftertaste is endless.
</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();//After the page loads, click the first TAB
</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 file easytab.js
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';
}
That's all. To conclude:
One, the style can also be optimized, such as adding some background pictures.
Two, the TAB TAB here is a load of all TAB pages, and then, click which TAB page to show which, the rest of the hidden. You can actually set the contents of the TAB page to the iframe, and then dynamically set the SRC value to it, and you can refresh the content at any point.