Question

js问题请大神帮我解答,关于选项卡的

我在做一个网页，想用到选项卡效果图：代码是：<div class="menu"> <ul> <li><a href="#pic" id="current" >相册</a></li> <li><a href="#video">视频</a></li> <li><a href="#message">动态</a></li> </ul></div><div class="boxmain"> <div class="pic clearfix"> <div >123</div> <div>123</div> </div> <div class="video clearfix"> <div>456</div> <div>456</div> </div> <div class="message clearfix"> <div>789</div> <div>789</div> </div></div>就是链接对应的每个div里面，又有很多的div,该怎么修改js才能实现选项卡的效果。附上视频里的js代码：function $(id){ return typeof id==='string'?document.getElementById(id):id;}window.onload=function(){ //获取鼠标滑过或点过的标签和要切换的内容的元素 var titles=$('notice-tit').getElementsByTagName('li'); divs=$('notice-con').getElementsByTagName('div'); if(titles.length!=divs.length) return; //遍历title下的所有li for var i=0;i<titles.length;i++){ titles[i].id=i; titles[i].onclick=function(){ //清楚所有li上的class for(var j=0;j<titles.length;j++){ titles[j].className='' divs[j].style.display='none'; } //设置当前为高亮显 this.className='select'; divs[this.id].style.display='block'; } }}请大神求救，

Answer 1

你这个太麻烦了，有简单的，一句话搞定的，还有其他原生的很多的，人家写好的也有

追问

请问可以告诉我具体该怎么修改吗？想了很多天，也没能搞明白

追答

<div id="div">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
var div=document.getElementById('div');
var aUi=div.children[0].children;
var aOi=div.children[1].children;
for(var i=0;i<aUi.length;i++){
aUi[i].index=i;
aUi[i].onclick=function(){
for(var i=0;i<aUi.length;i++){
aUi[i].className='';
aOi[i].style.display='none';

}
aOi[this.index].style.display='block';
this.className='active';



}


}



</script>