<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> .num { width: 15px; height: 20px; float: left; border: 1px solid black; margin-left: 5px; text-align: center; background: #FFFFFF; } #top { width: 200px;height: 20px;} #bottom { width: 200px; height: 200px; border: 1px solid black; margin-top: 5px;} </style> </head> <body> <div id="body"> <div id="top"> <div class="num">1</div> <div class="num">2</div> <div class="num">3</div> </div> <div id="bottom"></div> </div> </body> </html> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { var ts = ['111', '222', '333']; $(".num").hover(function() { var ind = $(this).index(); $(".num").eq(ind).css('background', 'red'); $('#bottom').text(ts[ind]); }, function() { var ind = $(this).index(); $(".num").eq(ind).css('background', '#fff'); }); }); </script>
用jquery做一个选项卡
猜你喜欢
转载自www.cnblogs.com/li1234567980/p/11746775.html
今日推荐
周排行