引用jquery.js文件
<script type="application/javascript" src="js/jquery.js"></script>
这里是我自己jquery.js文件存放的位置,换成自己的目录下的
html:
<div class="all"> <ul class="tab"> <li class="current">tab1</li> <li >tab2</li> <li>tab3</li> </ul> <div class="mes"> <div style="display: block">tab1的内容</div> <div>tab2的内容信息</div> <div>tab3的信息</div> </div> </div>
css:
*{ padding: 0; margin: 0; } ul{ list-style: none; height: 60px; } .tab li{ float: left; margin: 0 10px; line-height: 60px; width: 60px; text-align: center; background: pink; cursor: pointer; } ul .current{ background: #000000; color: white; } .mes{ margin-top: 10px; border: 1px solid #000000; height: 150px; width: 200px; } .mes div{ display: none; }
js:
$(function () { $(".tab").on("click",'li',function () { // tab切换 $(this).addClass("current").siblings().removeClass("current"); var index = $(this).index(); // tab栏切换对应的内容 $(".mes div").eq(index).show().siblings().hide(); }); });
整体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>切换tab栏</title> <script type="application/javascript" src="js/jquery.js"></script> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; height: 60px; } .tab li{ float: left; margin: 0 10px; line-height: 60px; width: 60px; text-align: center; background: pink; cursor: pointer; } ul .current{ background: #000000; color: white; } .mes{ margin-top: 10px; border: 1px solid #000000; height: 150px; width: 200px; } .mes div{ display: none; } </style> <script> $(function () { $(".tab").on("click",'li',function () { // tab栏切换 $(this).addClass("current").siblings().removeClass("current"); var index = $(this).index(); // tab栏切换对应的内容 $(".mes div").eq(index).show().siblings().hide(); }); }); </script> </head> <body> <div class="all"> <ul class="tab"> <li class="current">tab1</li> <li >tab2</li> <li>tab3</li> </ul> <div class="mes"> <div style="display: block">tab1的内容</div> <div>tab2的内容信息</div> <div>tab3的信息</div> </div> </div> </body> </html>