Home > Developer > JavaScript
Recently, we often use the tab, so I wrote a simple one. If I use it later, I will copy it directly. It will be okay if I change it slightly.
First look:
Next, let's take a look at how to write the code:
I. sp file easytab. jsp
Copy codeThe Code is 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">
<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: #78 bbaf; font-size: 14px ." From drinking by Tao Yuanming, the 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;"> In the human environment, there is no car or horse. </Div>
<Div style = "color: blue; font-size: 16px; font-weight: bold;"> q he nenger? Self-biased. </Div>
<Div style = "color: blue; font-size: 16px; font-weight: bold;"> Click here to see Nanshan. </Div>
<Div style = "color: blue; font-size: 16px; font-weight: bold. </Div>
<Div style = "color: blue; font-size: 16px; font-weight: bold;"> This is true. You have forgotten your words. </Div>
<Div style = "color: #00 aaff; font-size: 15px;">
Appreciation of works:
The famous phrase "Let's see Nanshan in a long time in the east of juju" has been famous for thousands of years.
With the spiritual realm of "far-away self-biased", the chrysanthemum will be collected in a leisurely manner,
Looking up at the mountains, it is so pleasant, so extraordinary!
These two sentences show the poet's leisurely mood with the description of objective scenes. The word "leisurely" is used very well,
It shows what the poet sees, not intentionally seeking, but meeting unexpectedly.
Su Dongpo praised the two statements: "The Time of chrysanthemum collection, seeing the mountains by chance, doesn't need to be satisfied at the beginning, and the situation and intention will, so it is also gratifying ."
The word "seeing" is also used very well. "seeing" is an accidental coincidence. the beautiful scenery of Nanshan is just in line with the leisurely state of mind during chrysanthemum collection, the synthesis of things I forget is "without me ".
If you use the word "hope", it is the first time you have a Nanshan in your mind that you want to look at it. It has become "My environment", and you will lose the naive interest of forgetting the machine.
What are the advantages of Nanshan that make the poet so praised?
The next step is "mountain sun Xi Jia, birds and the returning", which is also a scene that the poet accidentally sees,
In the beautiful evening scenery of Nanshan, birds fly back to the mountains together, and everything is free and flexible,
Just as the poet is free from the shackles of the officialdom, the poet realizes the true meaning of nature and life here.
"This is true. I want to know what I have forgotten ." What is the true meaning of the poet from the birds of nature, Nanshan, sunset, and Chrysanthemum?
Is it the natural law for all things to run and operate? Is it a yearning for an ancient simple and self-contained ideal society? Is it a natural philosophy of life?
Is it a straightforward and sincere character? The poet did not explicitly express it, but implicitly raised the question and asked the reader to think about it. He "wants to recognize his own words ".
If we can combine the previous steps of "getting together in the human environment without a car or a horse" to understand the true meaning of "true intention", we can understand the true meaning of life,
That is, life should not be overwhelmed by fame and fortune. It should not be insulted by the officialdom, but should return to nature to appreciate the infinite freshness and vitality of nature!
Of course, this "true intention" has a great connotation, and the author does not have to say it all. The Philosophical summary of these two sentences gives readers an endless range of imagination, 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 (); // After the page is loaded, click the first tag.
</Script>
</Body>
</Html>
Binary sample file grey.css
Copy codeThe Code is 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 {
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;
}
Iii. js file easytab. js
Copy codeThe Code is as follows:
/**
*
* @ Param _ this tab
* @ Param content_prefix the id prefix of the div corresponding to the tab. Note: All prefixes must be the same.
* @ Param active refers to the last number of the id of the div to be activated. Note: Numbers must start from scratch and increase by 1 in sequence.
*/
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. Summary:
I. The style can also be optimized, such as adding some background images.
2. Here, the tab is to load all the tab pages at a time, and then click the tab page to display the tab and hide other tabs. In fact, you can set the content on the tab page to iframe, and then dynamically set the src value for it to refresh the content when it is clicked.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
