利用jquery eq()屬性的tab欄
阿新 • • 發佈：2018-09-18
apps ack doc pin show ont lin splay bsp
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .tab { margin: 200px; } .tab-bay { overflow: hidden; } ul li { list-style: none; float: left; margin: 0 20px; } .tab-item { height: 30px; width: 40px; text-align: center; line-height: 30px; background: #666; color: #fff; } .active { color: red; } .conter-son { background: pink; } .conter-sona { display: none; text-align: center; } .conter-sonactive { display: block; } </style> </head>
<body> <div class="tab"> <ul class="tab-bay"> <li class="tab-item active">tab1</li> <li class="tab-item">tab2</li> <li class="tab-item">tab3</li> <li class="tab-item">tab4</li> </ul> <div class="conter-son"> <div class="conter-sona conter-sonactive"> <span>1</span> </div> <div class="conter-sona"> <span>2</span> </div> <div class="conter-sona"> <span>3</span> </div> <div class="conter-sona"> <span>4</span> </div> </div> </div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script> $(function() { $(‘.tab-bay .tab-item‘).click(function() { $(this).addClass(‘active‘).siblings().removeClass(‘active‘); $(‘.conter-son .conter-sona‘).eq($(this).index()).show().siblings().hide(); }); }); </script> </body>
</html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .tab { margin: 200px; } .tab-bay { overflow: hidden; } ul li { list-style: none; float: left; margin: 0 20px; } .tab-item { height: 30px; width: 40px; text-align: center; line-height: 30px; background: #666; color: #fff; } .active { color: red; } .conter-son { background: pink; } .conter-sona { display: none; text-align: center; } .conter-sonactive { display: block; } </style> </head>
<body> <div class="tab"> <ul class="tab-bay"> <li class="tab-item active">tab1</li> <li class="tab-item">tab2</li> <li class="tab-item">tab3</li> <li class="tab-item">tab4</li> </ul> <div class="conter-son"> <div class="conter-sona conter-sonactive"> <span>1</span> </div> <div class="conter-sona"> <span>2</span> </div> <div class="conter-sona"> <span>3</span> </div> <div class="conter-sona"> <span>4</span> </div> </div> </div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script> $(function() { $(‘.tab-bay .tab-item‘).click(function() { $(this).addClass(‘active‘).siblings().removeClass(‘active‘); $(‘.conter-son .conter-sona‘).eq($(this).index()).show().siblings().hide(); }); }); </script> </body>
</html>
利用jquery eq()屬性的tab欄