DOM中实现tab栏的切换效果
程序员文章站
2022-03-18 19:21:45
...
不太美观,但是想把这段js代码放上来,自己翻着玩。
<style type="text/css"> .Box { width: 240px; border: 1px solid #000; margin: 100px auto; padding: 20px; }
.con { width: 100%; height: 200px; background-color: #cccccc; border: 1px solid #000; margin-top: 10px; display: none; }
.current { background-color: #EEC900; }
<p class="Box" id="box"> <button class="current">one</button> <button>two</button> <button>three</button> <button>four</button> <p class="con" style="display:block">one</p> <p class="con">two</p> <p class="con">three</p> <p class="con">four</p>
<script> var box=document.getElementById("box"); var btns=box.getElementsByTagName("button"); var ps=box.getElementsByTagName("p"); for(var i = 0 ; i<btns.length; i++){ btns[i].setAttribute("index",i); btns[i].onclick=function(){ for(var j =0 ; j<btns.length ; j++){ btns[j].removeAttribute("class"); ps[j].style.display="none"; } this.setAttribute("class","current"); ps[this.getAttribute("index")].style.display="block"; } } </script>
以上就是DOM中实现tab栏的切换效果的详细内容,更多请关注其它相关文章!
上一篇: Ajax异步上传文件实列(附代码)