How to Implement the tab menu Switching Effect Using js + css
This article mainly introduces how to implement the tab menu switching effect through js + css, and describes the implementation code of css and js in the form of examples, which has some reference value, for more information, see
This article describes how to implement the tab menu switching effect through js + css. Share it with you for your reference. The specific implementation method is as follows:
Index.css:
The Code is as follows:
*{
Margin: 0px;
Padding: 0px;
}
Body {
Width: 600px;
Margin: 0 auto;
Background-color: silver;
}
# Contanier {
Background-color: yellow;
Width: 600px; height: 400px;
}
# TabNavi {
Width: 600px; height: 30px;
Background-color: #00 bfff;
Text-decoration: none;
List-style-type: none;
}
# TabNavi li {
Float: left;
Margin-right: 7px;
Background-color: # 008b8b;
Color: white;
Cursor: pointer;
Width: 60px;
Height: 28px;
Line-height: 30px;
Text-align: center;
}
# Content {
Width: 600px; height: 370px;
Background-color: white;
}
Index.html is as follows:
The Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> js enables dynamic tab menu switching </title>
<Link href = "css/index.css" rel = "stylesheet"/>
<Script type = "text/javascript">
Function gel (id ){
Return document. getElementById (id );
}
Var arr = [
{"Title": "news", "content": "This is a news channel "},
{"Title": "finance", "content": "This is financial channel "},
{"Title": "Entertainment", "content": "This is an entertainment channel "},
{"Title": "Sports", "content": "This is a sports channel "},
{"Title": "car", "content": "This is Car channel "},
{"Title": "video", "content": "This is a video channel "},
{"Title": "life", "content": "This is Life Channel "}
];
Window. onload = function (){
For (var I = 0; I <arr. length; I ++ ){
Var liNew = document. createElement ("li ");
LiNew. innerHTML = arr [I]. title;
Gel ("tabNavi"). appendChild (liNew );
// The click events are bound to these li resources, and each of them needs to be assigned an attribute (preferably an id)
LiNew. setAttribute ("id", I );
LiNew. onclick = function (){
Var navs = gel ("tabNavi"). childNodes;
// Clear all colors
For (var j = 0; j <navs. length; j ++ ){
If (navs [j]. nodeType = 1 ){
Navs [j]. style. backgroundColor = "# 008b8b ";
}
}
This. style. backgroundColor = "red ";
Gel ("content"). innerHTML = arr [this. id]. content;
};
}
};
</Script>
</Head>
<Body>
<Div id = "contanier">
<Ul id = "tabNavi"> </ul>
<Div id = "content" class = "content"> </div>
</Div>
</Body>
</Html>
I hope this article will help you design javascript programs.
