<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tab切换jQuery</title> <script type="text/javascript" src="jquery-3.1.0.js"></script> <style> *{padding: 0px;margin: 0px;} li{list-style: none;} a{text-decoration: none;color: #565656;} .wraper{margin: 100px auto;border: 1px solid #000;height: 500px;width: 500px;padding: 100px;} .tab_nav{height: 35px;padding-left:1px;} .tab_nav li{width: 60px; line-height: 35px;float: left;text-align: center;margin-left: -1px} .tab_nav li a{display: block;border: 1px solid #38c1ff;} .tab_cont{margin-top: 1px;} .cont{width: 300px;height:150px;border: 1px solid #38c1ff;text-align: center;line-height: 150px; display: none; } .tab_nav li a.slc{border-bottom: 1px solid #fff;} .blk{display: block;} .hid{display: none;} </style> </head> <body> <div> <div> <ul> <li><a href="javascript:void">标题1</a></li> <li><a href="javascript:void">标题2</a></li> <li><a href="javascript:void">标题3</a></li> <li><a href="javascript:void">标题4</a></li> </ul> </div> <div> <div class="cont blk">内容1</div> <div>内容2</div> <div>内容3</div> <div>内容4</div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.tab_nav ul li').click(function(){ var ind=$(this).index(); $(this).children('a').addClass('slc'); $(this).siblings().children('a').removeClass('slc'); $('.tab_cont .cont').eq(ind).addClass('blk'); $('.tab_cont .cont').eq(ind).siblings().removeClass('blk'); }); }); </script> </body> </html>
这是错误提示
橋本奈奈未
相关分类