Html
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Tab Authoring </title>
<script src= ". /js/try.js "></script>
<style type= "Text/css" >
ul#tabnav{
width:400px;
List-style:none;
border-bottom:1px solid Green;
margin:0;
padding-left:0;
padding-bottom:26px;
*padding-bottom:0;
}
Ul#tabnav li{
Float:left;
height:25px;
margin:0 10PX-2PX 0;
Background-color:green;
Color:black;
border:1px solid Green;
border-bottom:0;
padding:0;
}
Ul#tabnav A:link, Ul#tabnav a:visited {
Display:block;
Text-decoration:none;
padding:5px 10px 3px 10px;
}
#tabContent {
width:400px;
height:200px;
border:1px solid Green;
border-top-width:0;
}
#tabNav li.tabselected{
Background-color: #ffcc00;
Color: #fff;
}
</style>
<body>
<ul id= "Tabnav" >
<li onmouseover= "showcontent (1)" id= "Tab1" class= "tabselected" >
<a href= "" > News </a>
</li>
<li onmouseover= "showcontent (2)" id= "tab2" class= "" >
<a href= "" > Sports </a>
</li>
<li onmouseover= "showcontent (3)" id= "Tab3" class= "" >
<a href= "" > Entertainment </a>
</li>
</ul>
<div id= "Tabcontent" >
<div id= "Content1" > News content </div>
<div id= "Content2" style= "Display:none" > Sports content </div>
<div id= "Content3" style= "Display:none" > Entertainment content </div>
</div>
</body>
Js
function Showcontent (index) {/* Show index content */
var e = document.getElementById ("content" +index); /* First Take the div element of index # */
E.style.display= ""; /* Set the current display to "", that is, */
for (Var i=1;i<4;i++) {
if (i! = index) {
var e2 = document.getElementById ("content" +i);
E2.style.display= "None";
document.getElementById ("tab" +i). Classname= ""; /* Empty classname*/if not currently selected
}
else{
document.getElementById ("tab" +i). Classname= "tabselected"; /* Set the currently selected to tabselected*/
}
}
}
Change the classname of the Li tag and change the display property of the Content {tab Authoring}