<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" src= "Jquery-1.8.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#ul2 li"). Click (function () {
var num = $ (this). index ();
$ ("#con2 div"). CSS ("display", "none");
$ ("#con2 div"). EQ (num). CSS ("Display", "block")
})
})
</script>
<script type= "Text/javascript" >
Window.onload = function () {
var ss = document.getElementById ("Ul1"). getElementsByTagName ("Li");
var pa = document.getElementById ("con");
var div = pa.getelementsbytagname ("div");
Alert (div.length)
var ch;
for (var i = 0;i < ss.length;i++) {
Ss[i].index = i;
Ss[i].onclick = function () {
ch = this.index;
for (var j = 0; j<div.length; j + +) {
Div[j].style.display = "None";
if (j = = ch) {
Div[j].style.display = "block";
}
}
}
}
}
</script>
<style type= "Text/css" >
li{
Float:left;
height:30px;
width:100px;
border:1px #036 Solid;
List-style:none;
Text-align:center}
#con, #con2 {
Clear:both;
border:1px #0CF Solid;
height:200px;
width:200px;
Overflow:hidden}
#con Div, #con2 div{
height:200px;
width:200px;
Display:none}
</style>
<body>
<!--js method to realize-->
<ul id= "UL1" >
<li> Title One </li>
<li> Title Two </li>
<li> title Three </li>
</ul>
<div id= "Con" >
<div style= "Display:block" > Content one </div>
<div> Content Two </div>
<div> Content Three </div>
</div>
<!--jquery method implementation-->
<ul id= "Ul2" >
<li> Title One </li>
<li> Title Two </li>
<li> title Three </li>
</ul>
<div id= "Con2" >
<div style= "Display:block" > Content one </div>
<div> Content Two </div>
<div> Content Three </div>
</div>
</body>
