做个简单的tab切换效果,分别于jquery和js操作
(1)jQuery操作
先看下效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{box-sizing:border-box;padding: 0;margin: 0} ul{width: 100%;height: 50px;text-align: center;margin: 10px 0;} ul li{list-style: none;height: 100%;width: 100px; line-height: 50px;text-align: center;background-color: #9c8b8b; margin: 0 6px;display: inline-block;cursor: pointer;} section{width: 600px;height: 300px;border: 1px solid red;margin: 100px auto;} #area{width: 400px;height: 200px;margin: 10px auto;border: 1px solid red;} .child{width: 100%;height: 100%;float: left;display: none;text-align: center;line-height: 200px;font-size: 20px;color: black;} .active{display: block} #area .child:nth-child(1){ background-color: red; } #area .child:nth-child(2){ background-color: green; } #area .child:nth-child(3){ background-color: blue; } #area .child:nth-child(4){ background-color: yellow; } </style> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="area"> <div class="child active"> 内容一 </div> <div class="child"> 内容二 </div> <div class="child"> 内容三 </div> <div class="child"> 内容四 </div> </div> </section> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $(function(){ $("ul li").on('click',function(){ var index = $(this).index(); $(".child").each(function() { if (index == $(this).index()) { $(this).siblings().removeClass('active'); $(this).addClass('active'); } }) }) }) </script> </body> </html>
(2)js操作
.