The example of this article describes the method of Js+css to realize the tab menu switching effect. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js realizes tab menu dynamic switching effect </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 News Channel"},
{"title": "Finance", "Content": "This is the Financial channel"},
{"title": "Entertainment", "Content": "This is the Entertainment channel"},
{"title": "Sports", "content": "This is the Sports channel"},
{"title": "Car", "content": "This is the Car Channel"},
{"title": "Video", "Content": "This Is video channel"},
{"title": "Life", "content": "This is The 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);
All of these Li are tied to the event, you need to assign each of them a property (preferably 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>
<body>
<div id= "Contanier" >
<ul id= "Tabnavi" ></ul>
<div id= "Content" class= "content" ></div>
</div>
</body>
I hope this article will help you with your JavaScript programming.