<div id="main" id="one"> <ul id="tab"> <li class="active"><a href="javascript:;">Jquery特效</a></li> <li><a href="javascript:;javascript:;javascript:;">PhP教程</a></li> <li><a href="javascript:;javascript:;">Html5+Css3</a></li> <li><a href="javascript:;">Javascript</a></li> </ul> <div id="box2"> <ul class="tabs" style="display:block;"> <li><span>▪</span><a href="">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li> <li><span>▪</span><a href="">jQuery浮动层点击图标按钮关闭或展开</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">div+css导航菜单用CSS样式表处理斜角导航条</a></li> <li><span>▪</span><a href="">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li> <li><span>▪</span><a href="">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li> <li><span>▪</span><a href="">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li> <li><span>▪</span><a href="">jquery progress bar进度条插件，投票进度条系统</a></li> <li><span>▪</span><a href="">制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">焦点图上下滚动slider切换效果</a></li> </ul> </div> </div> <div id="main" id="two"> <ul id="tab"> <li class="active"><a href="javascript:;">Jquery特效</a></li> <li><a href="javascript:;javascript:;javascript:;">PhP教程</a></li> <li><a href="javascript:;javascript:;">Html5+Css3</a></li> <li><a href="javascript:;">Javascript</a></li> </ul> <div id="box2"> <ul class="tabs" style="display:block;"> <li><span>▪</span><a href="">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li> <li><span>▪</span><a href="">jQuery浮动层点击图标按钮关闭或展开</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">div+css导航菜单用CSS样式表处理斜角导航条</a></li> <li><span>▪</span><a href="">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li> <li><span>▪</span><a href="">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li> <li><span>▪</span><a href="">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li> <li><span>▪</span><a href="">jquery progress bar进度条插件，投票进度条系统</a></li> <li><span>▪</span><a href="">制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">焦点图上下滚动slider切换效果</a></li> </ul> </div> </div> <div id="main" id="three"> <ul id="tab"> <li class="active"><a href="javascript:;">Jquery特效</a></li> <li><a href="javascript:;javascript:;javascript:;">PhP教程</a></li> <li><a href="javascript:;javascript:;">Html5+Css3</a></li> <li><a href="javascript:;">Javascript</a></li> </ul> <div id="box2"> <ul class="tabs" style="display:block;"> <li><span>▪</span><a href="">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li> <li><span>▪</span><a href="">jQuery浮动层点击图标按钮关闭或展开</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">div+css导航菜单用CSS样式表处理斜角导航条</a></li> <li><span>▪</span><a href="">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li> <li><span>▪</span><a href="">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li> <li><span>▪</span><a href="">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li> <li><span>▪</span><a href="">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">js图片特效制作js焦点图上下滚动slider切换效果</a></li> </ul> <ul class="tabs"> <li><span>▪</span><a href="">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li> <li><span>▪</span><a href="">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li> <li><span>▪</span><a href="">jquery progress bar进度条插件，投票进度条系统</a></li> <li><span>▪</span><a href="">制作焦点文字带滤镜切换效果</a></li> <li><span>▪</span><a href="">焦点图上下滚动slider切换效果</a></li> </ul> </div> </div> <script> window.onload=function(){ //封装函数，让多个盒子使用不冲突 function fn(obj){ var target = document.getElementById(obj); var totab = target.getElementById("tab"); //获取第一个大盒子下面的tab， （这个好像报错了，不知道这样写法是不是有问题） //var tobox = target.getElementById("box2"); //var tab=totab.getElementsByTagName("li"); //获取id为tab下面的所有li //var box=tobox.getElementsByTagName("ul"); for(i=0;i<tab.length;i++){ tab[i].index=i; tab[i].onclick=function(){ for(j=0;j<tab.length;j++){ tab[j].className=""; box[j].style.display="none"; } this.className='active'; box[this.index].style.display="block"; } } } fn("one"); fn("two"); fn("three"); }</script>
添加回答
举报
0/150
提交
取消