用js实现简单的tab标签切换
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ margin: 0 auto; padding: 0; } #box{ margin-top: 200px; width: 1000px; height: 100px; background-color: #00CC00; display: flex; align-items: center; } #box li{ display: inline; } #box a{ color: #F9F2F4; text-decoration: none; padding: 10px 30px; } #box a:hover{ background-color: #006699; } .main{ margin-top: 20px; background-color: #245580; height: 500px; width: 1000px; } </style> <body> <div id="box"> <ul > <li><a onclick="index1()" href="#">首页</a></li> <li><a onclick="index2()" href="#">第二页</a></li> <li><a onclick="index3()" href="#">第三页</a></li> <li><a onclick="index4()" href="#">第四页</a></li> <li><a onclick="index5()" href="#">第五页</a></li> </ul> </div> <div class="main"> <p id="Noah">默认</p> </div> </body> <script type="text/javascript"> var obj=document.getElementById("Noah"); function index1(){obj.innerHTML="这是首页";} function index2(){obj.innerHTML="这是第二页";} function index3(){obj.innerHTML="这是第三页";} function index4(){obj.innerHTML="这是第四页";} function index5(){obj.innerHTML="这是第五页";} </script> </html>效果图：
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #JS实现tab栏切换 #JS实现简单tab栏切换
