Rumah >hujung hadapan web >tutorial js >如何实现tab栏的切换效果
导航栏的切换特效:
html代码如下:
<ul id="tab"> <li class="fli">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <p id="tab_con"> <p class="fp">aaaa</p> <p>bbbb</p> <p>cccc</p> </p>
css样式代码如下:
ul, li, p { padding: 0; margin: 0; } ul li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #fff; border: 1px #bbb solid; border-bottom: none; cursor: pointer; } ul li.fli { background-color: #ccc; color: red; } ul { overflow: hidden; zoom: 1; list-style-type: none; } #tab_con { width: 304px; height: 200px; } #tab_con p { width: 304px; height: 200px; display: none; border: 1px #bbb solid; border-top: none; } #tab_con p.fp { display: block; background-color: #ccc; } .tclass{ width: 100px; height: 30px; background: #000; }
js代码如下:
<script type="text/javascript"> var tabs = document.getElementById("tab").getElementsByTagName("li"); var ps = document.getElementById("tab_con").getElementsByTagName("p"); for (var i = 0; i < tabs.length; i++) { tabs[i].onclick = function () { change(this); } } function change(obj) { for (var i = 0; i < tabs.length; i++) { if (tabs[i] == obj) { tabs[i].className = "fli"; ps[i].className = "fp"; } else { tabs[i].className = ""; ps[i].className = ""; } } } </script>
Atas ialah kandungan terperinci 如何实现tab栏的切换效果 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!