The whole "panel" style is realized
Perhaps, we first care about how the entire can see is achieved. In fact, it is a form.
We can look at the CSS code by setting the table and the border of the cell and the cells of the cell and the background color.
.sec1 {
Background-color: #eeeeee;
Cursor: Hand;
Color: # 000000;
Border-left: 1px solid #ffffff;
Border-top: 1px solid #ffffffffff;
Border-Right: 1PX Solid Gray;
Border-bottom: 1px solid #fffffff
} / * Tab button Style in normal state * /
.sec2 {
Background-color: # d4d0c8;
Cursor: Hand;
Color: # 000000;
Border-left: 1px solid #ffffff;
Border-top: 1px solid #ffffffffff;
Border-Right: 1PX Solid Gray;
Font-weight: bold;
} / * Tab button is pressed (ie the currently selected) style * /
.main_tab {
Background-color: # d4d0c8;
Color: # 000000;
Border-left: 1px solid #ffffff;
Border-Right: 1PX Solid Gray;
Border-bottom: 1px solid gray;
} / * The appearance of the entire panel (ie, the table) * /
The specific properties can be referred to the relevant information.
The actual effect is achieved, and the initial example is written, TBody, TBodies, Cells, Display, there is no more talk. One thing to explain is: in fact, the TBodies collection is a number of TBODY blocks in a table, and Cells is a number of TDs in a Table. Let's take a look at the JavaScript function that realizes the last effect: Function Secboard (n) // Parameter n means that the click is which button is
{
For (i = 0; i
/ / Through the test, all buttons make all buttons unchecked
Sectable.cells [n] .classname = "sec2";
/ / Turn the button to select the state
For (i = 0; i
// Let all units become hidden
Maintable.tbodies [n] .style.display = "block";
/ / Which button is clicked, let the corresponding cell display
}
The following is the code:
