已解决问题
谷歌xazrt57用户在2016.08.30提交了关于“钱枫很棒的js Tab选项切换效果”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-03-03T06:16:05。希望大家能够帮助她。详细问题描述及疑问：期待您的答案，没有什么华丽的语言,但是我对你的感谢不会减少 ！
很棒的js Tab选项切换效果
时间：2016.08.30 发布人：xazrt57
谷歌xazrt57用户在2016.08.30提交了关于“钱枫很棒的js Tab选项切换效果”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-03-03T06:16:05。希望大家能够帮助她。
希望以下的回答，能够帮助你。用户名：shuarui80p
问答n"><head><metacharset="UTF-8"><title>tab</tit议入凯古足le><style>*{margin:0;padding:0;list-style:none;}.box虽呢题严敌{width:1000px;overflow:hidden;margin:100pxauto0px;}#title{line-height:40px;background-color:rgb(247,247,247);font-size:16px;font-weight:bold;co完伯想lor:rgb(102,102,102);overflow:hidden;}#titlespan{float:left;width:166px;text-align:center;}#titlespan:hover{/*color:black;*/cursor:pointer;}#con举简际既倒式文烟若常tent{margin-top:20px;}#contentli{width:1050px;overfl新领点组ow:hidden;display:none;background-color:rgb(247,247,247);}#contentlidiv{width:156px;margin-right:14px;float:left;text-align:center;}#contentlidiva{font-size:14px;color:且免需磁复black;lin格功滑战础米时穿史何e-height:14px;/*float:left;*/display:inline-block;margin-top:10px;}#contentlia:hover{color:#B70606;}#contentlidivspan源影岁{font-size:16px;line-height:16px;/*float:left;*/display:block;color:rgb(102青帮移室单有可市,102,102);margin-top:10px;}#contentimg{float:left;wi川叶飞日dth:15**x;height:250px;}#title.select{background-color:rgb(10,167,112);color:white;}#content.show{display:block;}</style></head><body><divclass="box"><pid="title"><spanclass="select">帅哥</span><s钟有哪间眼哥武微集规广pan>美女</span><span>宠物</span><s支副汉固各氧陆pan>影视</span><span>英雄联盟</span><span>音乐</span></p><ulid="content"><liclass="show束年思断杨化"><div><img度声京英配越名散镇格src="images/shuaige1.jpg"alt="帅哥1"><ahref="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div><d两iv><imgsrc="images/shuaig套e2.jpg"alt="帅哥2"><ahref="#">杰森·史坦森</室喜举轴全念危买搞a><span>狂拽老拿完望创固身天炫酷屌炸天</span></div><div><imgsrc="images/shuaige3.jpg"alt="帅哥3"><ahref="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div><div><imgsrc="images/shuaige4.jpg"alt="帅哥4"><ahref="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div><div><imgsrc="images/shuaige5.jpg"alt="帅哥5"><ahref="#">卷福</a><span>低调奢华有内涵</span></div><div><imgsrc="images/shuaige6.jpg"alt="帅哥6"><ahref="#">卷福</a><span>低调奢华有内涵</span></div></li><li><div><imgsrc="images/meinv1.jpg"alt="美女1"><ahref="#">美女</a><span>外猛内柔女汉子</span></div><div><imgsrc="images/meinv2.jpg"alt="美女2"><ahref="#">美女</a><span>外猛内柔女汉子</span></div><div><imgsrc="images/meinv3.jpg"alt="美女3"><ahref="#">美女</a><span>卖萌嘟嘴剪手</span></div><div><imgsrc="images/meinv4.jpg"alt="美女4"><ahref="#">美女</a><span>卖萌嘟嘴剪手</span></div><div><imgsrc="images/meinv5.jpg"alt="美女5"><ahref="#">美女</a><span>时尚亮丽小清新</span></div><div><imgsrc="images/meinv6.jpg"alt="美女6"><ahref="#">美女</a><span>时尚亮丽小清新</span></div></li><li><div><imgsrc="images/chongwu1.jpg"alt="宠物1"><ahref="#">宠物</a><span>每只666块</span></div><div><imgsrc="images/chongwu2.jpeg"alt="宠物2"><ahref="#">宠物</a><span>每只666块</span></div><div><imgsrc="images/chongwu3.jpg"alt="宠物3"><ahref="#">宠物</a><span>每只666块</span></div><div><imgsrc="images/chongwu4.jpg"alt="宠物4"><ahref="#">宠物</a><span>每只666块</span></div><div><imgsrc="images/chongwu5.jpg"alt="宠物5"><ahref="#">宠物</a><span>每只666块</span></div><div><imgsrc="images/chongwu6.jpg"alt="宠物6"><ahref="#">宠物</a><span>每只666块</span></div></li><li><div><imgsrc="images/yingshi1.jpg"alt="影视1"><ahref="#">哈利波特系列</a><span>经典中的经典</span></div><div><imgsrc="images/yingshi2.jpg"alt="影视2"><ahref="#">三傻大闹宝莱坞</a><span>看到泪崩</span></div><div><imgsrc="images/yingshi3.jpg"alt="影视3"><ahref="#">变形金刚系列</a><span>过瘾过瘾过瘾</span></div><div><imgsrc="images/yingshi4.jpg"alt="影视4"><ahref="#">千与千寻</a><span>梦中的小**那么清新</span></div><div><imgsrc="images/yingshi5.jpeg"alt="影视5"><ahref="#">龙猫</a><span>我的龙猫啊啊啊</span></div><div><imgsrc="images/yingshi6.jpg"alt="影视6"><ahref="#">阿甘正传</a><span>阿甘还是那个阿甘</span></div></li><li><div><imgsrc="images/lol1.jpg"alt="lol1"><ahref="#">寒射手</a><span>蛮王他媳妇</span></div><div><imgsrc="images/lol2.jpg"alt="lol2"><ahref="#">黑暗之女</a><span>小**一枚</span></div><div><imgsrc="images/lol3.jpg"alt="lol3"><ahref="#">探险家</a><span>游戏中我最帅</span></div><div><imgsrc="images/lol4.jpg"alt="lol4"><ahref="#">人马</a><span>上单大野全能</span></div><div><imgsrc="images/lol5.jpg"alt="lol5"><ahref="#">提莫提百万</a><span>每天死亡百万次。。</span></div><div><imgsrc="images/lol6.jpg"alt="lol6"><ahref="#">狼人</a><span>别给我放大</span></div></li><li>待开发。。。</li></ul></div><script>vartitle=document.getElementById('title');varcontent=document.getElementById('content');varspans=title.getElementsByTagName('span');varlis=content.getElementsByTagName('li');for(vari=0;i<spans.length;i++){spans[i].index=i;spans[i].onclick=function(){for(varj=0;j<spans.length;j++){spans[j].className='';lis[j].className='';}this.className='select';lis[this.index].className='show';}}</script></body></html>
第1个回答
本文实例为大家分享了jsTab选项切换效果，供大家参考，具体内容如下
<!DOCTYPEhtml><htmllang="e这段代码的关键处在最后的两个for遍历和this指针，第一个for遍历是为每一个span按钮添加点击事件，而第二个for遍历是确定当前点击的是哪个按钮，相应的内容部分就很好控制出现和隐藏了；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。