Pure Css+js Write a Simple Tab tab page with style _javascript tips

Source: Internet
Author: User
Recently often to use the Tab tab page, so write a simple, later use the words directly copy a, a little change on the OK.

First look at the effect of the picture:

Next look at the code how to write it:

One, SP file easytab.jsp
Copy Code code as follows:

<%@ 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" >
<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 are 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>

<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;" > poetry "Mining chrysanthemum under the east fence, leisurely see Nanshan." "Drinking" from the poet Tao Yuanming of 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 cottage is in the human realm, but no car is noisy. </div>
<div style= "Color:blue;font-size:16px;font-weight:bold;" > Ask you what you can do? Heart far from the side. </div>
<div style= "Color:blue;font-size:16px;font-weight:bold;" > Mining chrysanthemum under the east fence, leisurely see Nanshan. </div>
<div style= "Color:blue;font-size:16px;font-weight:bold;" > Mountain Gas Rixi Good, birds and also. </div>
<div style= "Color:blue;font-size:16px;font-weight:bold;" > There is a meaning in this, want to distinguish has forgotten the speech. </div>
<div style= "color: #00aaff; font-size:15px;" >
Works appreciation:
"Mining chrysanthemum under the east fence, leisurely see Nanshan," This is the famous famous in the past thousand years.
Because of the "heart far away from the" spirit of the realm, will be leisurely in the fence mining chrysanthemum,
Looked up at the mountain, is so comfortable, so extraordinary and refined!
These two sentences with the description of the objective scenery to foil the poet's leisurely mood, "leisurely" two words used very good,
The poet sees the feeling, not intentionally seeks, but encounters.
Su Dongpo is quite commendable to these two sentences: "The time that picks Chrysanthemum, the chance sees mountain, the beginning does not intention, but the boundary and the tacit understanding, therefore gratifying also." ”
"See" The word is also used extremely good, "see" is inadvertently occasionally, nanshan scenery just with the chrysanthemum when the leisurely mood, the composition of my two forgotten "without me".
If you use the word "hope", that is, the heart of Nanshan first, only to look at, became a "my territory", lost a kind of naïve charm of forgetting machine.
What are the scenic spots in Nanshan that make poets so praised?
Next is "Mountain gas rixi Good, birds and also", this is the poet inadvertently see the scenery,
In the beautiful dusk scenery of Nanshan, the birds fly back to the forest, all things are free, suitable and moving,
Just as the poet free from the shackles of officialdom, leisurely and carefree, the poet here to realize the essence of nature and life.
"There is a meaning in this, want to distinguish has forgotten the speech." "The poet from this nature of birds, Nanshan, sunset, tears in what the meaning of what to realize?"
Is it the natural law of everything that works and does? Is the longing for the ideal society of ancient simplicity and self-sufficiency? Is show extinct's philosophy of life?
Is it a forthright and sincere character? The poets did not explicitly say that they merely asked questions implicitly and asked the reader to think, and he was "trying to discern his own words".
If the combination of the front "knot-Lu in the human situation, but no car and horse" to understand, "truth" we can understand the real meaning of life,
That is, life should not be in the fame and fortune, should not be officialdom dirty defiled their natural nature, but should go back to nature, to appreciate the boundless freshness and vitality of nature!
Of course, the meaning of this "true meaning" is very large, the author did not speak out, also need not speak out, these two philosophical summary to the reader with a word has been full of imagination space, memorable.
</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 ()//page loading complete, click on the first label
</script>
</body>

Second, the style document GREY.CSS
Copy Code code as follows:

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;
}

Third, JS file easytab.js
Copy Code code as follows:

/**
*
* @param the Tab tab that _this clicks on
* @param the ID prefix of the div corresponding to the Content_prefix tab label. Note: This requires all prefixes to be the same.
* @param the last digit of the ID of the div to be activated by active. Note: This requires that the number must start at zero and increase by 1 in turn.
*/
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. Finally, summarize:

The style can also be optimized, such as adding some background pictures.
The Tab tab here is to load all tab pages at a time, and then click which tab page to show which, other hidden. In fact, the tab content can be set to an IFRAME, and then dynamically set the value of SRC, you can reach the point which will refresh which content.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.