How to achieve tab menu switching effect with js css_javascript skills

The example in this article describes how to achieve the tab menu switching effect with js css. Share it with everyone for your reference. The specific implementation method is as follows:

index.css is as follows:

Copy code 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: #00bfff;
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:

Copy code The code is as follows:

                                                                                                                                                                                                                                                                                                                                                   

I hope this article will be helpful to everyone’s JavaScript programming design.