A simple tab page with style written in pure css js_javascript skills

Recently I often use tabs, so I wrote a simple one. If I use it in the future, just copy it and make a few changes.

Look at the renderings first:

Then let’s see how the code is written:

1. sp file easytab.jsp

Copy code The code is as follows:

String path = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>

• 诗词


• 百度


• 360搜索

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

饮酒

结庐在人境，而无车马喧。

问君何能尔？心远地自偏。

采菊东篱下，悠然见南山。

山气日夕佳，飞鸟相与还。

此中有真意，欲辨已忘言。

作品赏析：
“采菊东篱下，悠然见南山”,这是千年以来脍炙人口的名句。
因为有了“心远地自偏”的精神境界，才会悠闲地在篱下采菊，
抬头见山，是那样地怡然自得，那样地超凡脱俗！
这两句以客观景物的描写衬托出诗人的闲适心情，“悠然”二字用得很妙，
说明诗人所见所感，非有意寻求，而是不期而遇。
苏东坡对这两句颇为称道：“采菊之次，偶然见山，初不用意，而境与意会，故可喜也。”
“见”字也用得极妙，“见”是无意中的偶见，南山的美景正好与采菊时悠然自得的心境相映衬，合成物我两忘的“无我之境”。
如果用“望”字，便是心中先有南山，才有意去望，成了“有我之境”，就失去了一种忘机的天真意趣。
南山究竟有什么胜景，致使诗人如此赞美呢？
接下去就是“山气日夕佳，飞鸟相与还”，这也是诗人无意中看见的景色，
在南山那美好的黄昏景色中，飞鸟结伴飞返山林，万物自由自在，适性而动，
正像诗人摆脱官场束缚，悠然自在，诗人在这里悟出了自然界和人生的真谛。
“此中有真意，欲辨已忘言。”诗人从这大自然的飞鸟、南山、夕阳、秋菊中悟出了什么真意呢？
是万物运转、各得其所的自然法则吗？是对远古纯朴自足的理想社会的向往吗？是任其自然的人生哲理吗？
Is it a straightforward and sincere character? The poet did not express it explicitly, but only implicitly raised questions for readers to think about, while he "wanted to distinguish himself and forgot to speak."
If we understand it in conjunction with the previous sentence "The home is in a human environment, without the noise of carriages and horses", the "true meaning" can be understood as the true meaning of life.
That is, life should not be obsessed with fame and fortune, and should not be dominated by officialdom. The filthiness of others has tarnished one's natural nature. Instead, one should go back to nature and appreciate its infinite freshness and vitality!
Of course, this "true meaning" has a great connotation. The author did not say it all, and there is no need to say it. These two philosophical summaries give the readers enough room for imagination and endless aftertaste.

2. Style file gray.css

Copy code The 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 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;
}

3. js file easytab.js

Copy code The code is as follows:

/**
*
* @param _this The clicked tab label
* @param content_prefix The id prefix of p corresponding to the tab label. Note: All prefixes here must be the same.
* @param active The last number of the id of p to be activated. Note: It is required that the numbers here must start from zero and increase by 1.
*/
function tabSwitch2(_this, content_prefix,active) {
var tabs = document.getElementsByName(_this.name);
var number = tabs.length;
for (var i=0; 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 it. Finally, to summarize:

1. The style can also be optimized, such as adding some background images.
2. The tab tags here load all tab pages at once, and then click on which tab page to display it, while hiding the others. In fact, you can set all the contents of the tab page to iframe, and then dynamically set the src value for it, so that the content can be refreshed according to the click.