1 <style type="text/css">
2 /*reset css*/
3 body{font-size:0.8em;letter-spacing:1px;font-family:"Microsoft YaHei"; line-height:1.8em}
4 div,h2,p,ul,li{margin:0;padding:0}
5 h1{font-size:1em; font-weight:normal;}
6 h1 a{background:#047; padding:2px 3px; color:#fff; text-decoration:none;}
7 h1 a:hover{background:#a40000; color:#fff; text-decoration:underline}
8 h3{color:#888; font-weight:bold;font-size:1em; margin:1em auto; position:relative}
9 /*demo css*/
10 h2{width:120px; height:25px;background:#a40000;font-size:12px; color:#fff;text-align:center; ;line-height:25px;margin:30px 0 10px}
11
12 ul#tabnav{width:500px;height:25px;margin-left:100px}
13 ul#tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}
14 ul#tabnav li.hover{background:#047}
15 #tabbox{width:500px;height:100%;border:2px solid #047}
16 #tabbox div{margin:10px;line-height:20px}
17 </style>
2 /*reset css*/
3 body{font-size:0.8em;letter-spacing:1px;font-family:"Microsoft YaHei"; line-height:1.8em}
4 div,h2,p,ul,li{margin:0;padding:0}
5 h1{font-size:1em; font-weight:normal;}
6 h1 a{background:#047; padding:2px 3px; color:#fff; text-decoration:none;}
7 h1 a:hover{background:#a40000; color:#fff; text-decoration:underline}
8 h3{color:#888; font-weight:bold;font-size:1em; margin:1em auto; position:relative}
9 /*demo css*/
10 h2{width:120px; height:25px;background:#a40000;font-size:12px; color:#fff;text-align:center; ;line-height:25px;margin:30px 0 10px}
11
12 ul#tabnav{width:500px;height:25px;margin-left:100px}
13 ul#tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer}
14 ul#tabnav li.hover{background:#047}
15 #tabbox{width:500px;height:100%;border:2px solid #047}
16 #tabbox div{margin:10px;line-height:20px}
17 </style>
1 <script type="text/javascript">
2 window.onload=function(){
3 var tabnav=document.getElementById('tabnav');
4 var list=tabnav.getElementsByTagName('li');
5 var tabbox=document.getElementById('tabbox');
6 var divs=tabbox.getElementsByTagName('div');
7 var hover='hover';//当前点击显示的样式
8 var indexValue=function(self,obj){//获取索引值的函数,通过它获取当前点击在导航中的索引位置
9 for(var i=0;i<obj.length;i++){
10 if(obj[i]==self) return i;
11 }
12 };
13 var index;
14 list[0].className=hover;//第一个默认高亮,建议在页面中直接定义
15 for(var k=1;k<divs.length;k++){//我为了省事,用一个for循环定义默认显示第一个切换区块,其他隐藏.这个最好用CSS定义,能避免页面加载时它全部显示出来.
16 divs[k].style.display='none';
17 }
18 for(var l=0;l<list.length;l++){//点击事件
19 list[l].onclick=function(){
20 index=indexValue(this,list);//利用前面定义的indexValue函数取当前点击在选项导航中的索引值,
21 for(var m=0;m<list.length;m++){
22 list[m].className= (m==index) ? hover : '';//高亮显示点击项并移除其他项高亮
23 }
24 for(var n=0;n<divs.length;n++){
25 divs[n].style.display= (n==index) ? 'block' : 'none';//显示点击对应的选项区,隐藏其他
26 }
27 }
28 }
29 }
30 </script>
2 window.onload=function(){
3 var tabnav=document.getElementById('tabnav');
4 var list=tabnav.getElementsByTagName('li');
5 var tabbox=document.getElementById('tabbox');
6 var divs=tabbox.getElementsByTagName('div');
7 var hover='hover';//当前点击显示的样式
8 var indexValue=function(self,obj){//获取索引值的函数,通过它获取当前点击在导航中的索引位置
9 for(var i=0;i<obj.length;i++){
10 if(obj[i]==self) return i;
11 }
12 };
13 var index;
14 list[0].className=hover;//第一个默认高亮,建议在页面中直接定义
15 for(var k=1;k<divs.length;k++){//我为了省事,用一个for循环定义默认显示第一个切换区块,其他隐藏.这个最好用CSS定义,能避免页面加载时它全部显示出来.
16 divs[k].style.display='none';
17 }
18 for(var l=0;l<list.length;l++){//点击事件
19 list[l].onclick=function(){
20 index=indexValue(this,list);//利用前面定义的indexValue函数取当前点击在选项导航中的索引值,
21 for(var m=0;m<list.length;m++){
22 list[m].className= (m==index) ? hover : '';//高亮显示点击项并移除其他项高亮
23 }
24 for(var n=0;n<divs.length;n++){
25 divs[n].style.display= (n==index) ? 'block' : 'none';//显示点击对应的选项区,隐藏其他
26 }
27 }
28 }
29 }
30 </script>
1 <ul id="tabnav">
2 <li>jQuery技术</li>
3 <li>CSS技术</li>
4 <li>xhtml技术</li>
5 </ul>
6 <div id="tabbox">
7 <div>jQuery技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div>
8 <div>CSS技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div>
9 <div>xhtml技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png" /></div>
10 </div>
2 <li>jQuery技术</li>
3 <li>CSS技术</li>
4 <li>xhtml技术</li>
5 </ul>
6 <div id="tabbox">
7 <div>jQuery技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/644432cc1eac546463ff2a9ebefc2e81cc861961_m.jpg" /></div>
8 <div>CSS技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/8bd0ae01d96d6caad52ac97044e526edb6bf52f7_m.jpg" /></div>
9 <div>xhtml技术在这里显示!@Mr.Think.<br /><img src="http://img.ffffound.com/static-data/assets/6/34aff353e8a0c93b1826170035fb8ed6d9de9933_m.png" /></div>
10 </div>
http://www.cnblogs.com/mrthink/archive/2010/08/13/1799309.html