<html> <head> <meta http-equiv="content=type" content="text/html;charset=gbk"/> <style> body,ul,li,img{ margin:0px; padding:0px; font-size:30px; } #d1{ margin-left:30px; margin-top:30px; 400px; height:30px; } ul{ list-style-type:none; } ul li{ border:2px solid black; text-align:center; line-height:29px; float:left; 60px; height:30px; background-color:#cccccc; cursor:pointer; margin-right:3px; } #d2{ border:2px solid blue; margin-left:30px; 200px; height:100px; background-color:yellow; } #d3{ border:2px solid blue; margin-left:30px; 200px; height:100px; background-color:green; } .hide{ display:none; } .select{ background-color:red; }
</style> <script> function doChange(index){ var u = document.getElementById("u1"); var lis = u.getElementsByTagName('li'); for(i=0;i<lis.length;i++){ lis[i].className=''; } var obj = document.getElementById('l'+index); obj.className='select'; var divs = document.getElementById('d2').getElementsByTagName('div'); for(i=0;i<divs.length;i++){ divs[i].style.display='none'; } document.getElementById('a'+index).style.display='block';
var divs2 = document.getElementById('d3').getElementsByTagName('div'); for(i=0;i<divs2.length;i++){ divs2[i].style.display='none'; } document.getElementById('b'+index).style.display='block'; } </script>
</head> <body>
<div id="d1"> <ul id="u1"> <li class="select" id="l1" onclick="doChange(1)">选项一</li> <li id="l2" onclick="doChange(2)">选项二</li> <li id="l3" onclick="doChange(3)">选项三</li> <li id="l4" onclick="doChange(4)">选项四</li> <li id="l5" onclick="doChange(5)">选项五</li> </ul> </div>
<div id="d2"> <div id="a1">选项一内容</div> <div id="a2" style="display:none;">选项二内容</div> <div id="a3" style="display:none;">选项三内容</div> <div id="a4" style="display:none;">选项四内容</div> <div id="a5" style="display:none;">选项五内容</div> </div> <div id="d3"> <div id="b1">选项一内容</div> <div id="b2" style="display:none;">选项二内容</div> <div id="b3" style="display:none;">选项三内容</div> <div id="b4" style="display:none;">选项四内容</div> <div id="b5" style="display:none;">选项五内容</div> </div> </body> </html>