<title> Untitled Document </title>
<style type= "Text/css" >
body{font-size:13px;}
ul,li{margin:0; padding:0; list-style:none;}
#menu li{text-align:center; float:left; padding:5px; margin-right:2px; width:50px; cursor:pointer;}
#menu li.tabfocus{width:50px; font-weight:bold; Background-color: #f3f2e7; border:1px solid #666; border-bottom:0; z-index:100; Position:relative;}
#content {width:260px; height:80px; padding:10px; background: #f3f4e7; clear:left; border:1px solid #666; Position: Relative top:-1px;}
#content li{Display:none;}
#content li.confocus{Display:block;}
</style>
<script type= "Text/javascript" src= "Jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#menu Li"). each (function (index) {
$ (this). Click (function () {
$ ("#menu li.tabfocus"). Removeclass ("Tabfocus");
$ (this). addclass ("Tabfocus");
$ ("#content li:eq (" +index+ ")"). Show (). siblings (). Hide ();
});
});
})
</script>
<body>
<ul id= "Menu" >
<li class= "Tabfocus" > Home </li>
<li> Electrical </li>
<li> Pre-owned </li>
</ul>
<ul id= "Content" >
<li class= "Confocus" > I am Home content </li>
<li> Welcome to Electrical City! </li>
<li> second-hand market, product rich </li>
</ul>
</body>