A simple TAB tab page style written by pure CSS+JS

Author：Eve Cole Update Time：2025-02-23 09:16:02

Recently, I often use the TAB tab pages, so I wrote a simple one. If you use it in the future, copy one directly, and change it slightly.

First look at the effect drawing:

Next, look at how the code is written:

1. SP filesytab.jsp

Copy code code as follows:

<%@ page language = "java" image = "java.util.*" pageEncoding = "UTF-8"%>

String path = request.getContextPath ();

String basepath = request.getscheme ()+": //"+"+requestServerName ()+": "+requestServerPort ()+PATH+"/";

<! Doctype html public "-// W3C // dtd html 4.01 transitional // en">>

<html>

<head>

<Title> My JSP 'TAB.JSP' Starting Page </Title>

</head>

<body>

<div>

<ul>

<li> <a name = "Easytab" onClick = "Tabswitch2 (this, 'Easytab_Content _', 0);"> Poetry </a> </li>

<li> <a name = "Easytab" onClight = "Tabswitch2 (this, 'Easytab_Content _', 1);"> Baidu </a> </li>

<li> <a name = "Easytab" onClight = "Tabswitch2 (this, 'Easytab_Content _', 2);"> 360 Search </a> </li>

</ul>

<div style = "color:#78bbaf; font-siZe: 14px;"> Poetry famous sentence "Picks the chrysanthemums under the fence, see Nanshan leisurely."

<div style = "color: blue; font-size: 16px; font-weight: bold;"> drinking </div>

<div style = "color: blue; font-size: 16px; font-weight: bold;"> The knot is in the people's realm without the noise. </div>

<div style = "color: blue; font-size: 16px; font-weight: bold;"> Ask Jun He Neng? The heart is far away. </div>

<div style = "color: blue; font-size: 16px; font-weight: bold;"> Chichelon east fences, see Nanshan leisurely. </div>

<div style = "color: blue; font-size: 16px; font-weight: bold;"> mountains and day and night, flying birds and returning. </div>

<div style = "color: blue; font-size: 16px; font-weight: bold;"> There is a true meaning in this way, and forgotten. </div>

Appreciation of the work:

"Under the fence of the chrysanthemum, see Nanshan leisurely", this is a famous sentence for thousands of years.

Because of the spiritual realm of "far -hearted", it will leisurely pick up chrysanthemum under the fence,

Looking up at the mountains, it is so comfortable, so extraordinary!

These two sentences set off the poet’s leisurely mood in the description of objective scenery.

It shows that what the poet sees is not intended to seek, but to meet unexpectedly.

Su Dongpo is quite calling these two sentences: "Times of chrysanthemums, accidentally seeing the mountains, unwilling to see it at the beginning, but the situation and the intention, so it is good."

The word "seeing" is also very useful. "Seeing" is an inadvertent occasional seeing. The beauty of Nanshan is exactly the one with the leisurely mood of Caiju.

If you use the word "Wang", you have Nanshan in your heart, so you want to look at it. It becomes "the state of me", and you will lose a kind of innocence of forgetting the opportunity.

What is the victory of Nanshan, which praises the poet so much?

Next is "the mountains and winds, the birds are returned", which is also the scenery that the poet sees inadvertently.

In the beautiful dusk scenery of Nanshan, flying birds flew back to the forest, and all things were free and comfortable.

Just like the poet gets rid of the binding of the officialdom and is free, the poet realizes the true meaning of nature and life here.

"There is a true meaning, and you want to distinguish the words." What true the poet has realized from this natural bird, Nanshan, sunset, and autumn chrysanthemum?

Is it that all things are operating and do their own natural rules? Is it yearning for the ideal society of ancient and simple and self -sufficient? Is it the philosophical philosophy of nature?

Is it a sincere character? The poets did not clearly stated that they just raised the questions and asked readers to think, and he "wanted to distinguish himself."

If you understand the previous "Jieyu in the people's realm and no car and horse noise", we can understand the true meaning of life, "true meaning",

That is, life should not be drawn in fame and fortune, and should not be tarnished by the officialdom of the officialdom, but should return to nature to appreciate the infinite freshness and vitality of nature!

Of course, the connotation of this "true meaning" is very large. The author did not all say it, nor needed it. These two philosophical nodules gave the readers the imagination of endless imagination, which is endless.

</div>

</div>

</div>

document.GetelementsByname ("Easytab") [0] .CLick (); // After the page is loaded, click the first label

</script>

</body>

</html>

Second, style file GREY.CSS

Copy code code as follows:

body {

background-color: #ccc;

margin: 40px;

}

.sytab_area {

border: 1px solid #494e52;

background-color:#636d76;

padding: 8px;

}

ul.easytabs {

margin: 16px 0;

padding: 0 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: hold {

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;

}

.sytab_content {

background-color: #ffffff;

padding: 10px;

height: 400px;

}

3. js file easytab.js

Copy code code as follows:

/**

* @param _This clicked tab tags

* @Param Content_Prefix Tab tag corresponds to the ID prefix of the DIV. Note: Here are the same prefixes that must be the same.

* @param Active to activate the final number of the ID of the DIV. Note: The number required here must start from scratch, and increase in turn 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';

}

It's the above. Summary:

First, the style can also be optimized, such as adding some background pictures.

Second, the TAB tag here is loaded all the TAB pages at one time, and then you can display which TAB page is displayed and other hidden. In fact, you can set the contents of the tab page to iframe, and then set the value of the src to it dynamically, and you can refresh which content can be reached.