<title></title> <style> ul li,ol li{ float: left; list-style: none; } ul li{ display: none; } </style> </head> <body> <ol> <li>选项1</li> <li>选项2</li> </ol> <br/> <ul> <li><img src="images/head01.jpg" alt=""/></li> <li><img src="images/head02.jpg" alt=""/></li> </ul> </body> <script src="js/jquery-1.8.3.min.js"></script> <script> $(document).ready(function () { $('ul li:eq(0)').css("display","block"); //选项1 $('ol li:eq(0)').hover(function () { // alert($(this).index()); $(this).css("border-top","2px solid pink"); var index = $(this).index(); $('ul li:eq('+index+')').show(); }, function () { $(this).css("border-top","0px solid pink"); var index = $(this).index(); $('ul li:eq('+index+')').hide(); }); //选项2 $('ol li:eq(1)').hover(function () { // alert($(this).index()); $(this).css("border-top","2px solid pink"); var index = $(this).index(); $('ul li:eq('+index+')').show(); }, function () { $(this).css("border-top","0px solid pink"); var index = $(this).index(); $('ul li:eq('+index+')').hide(); }); }); </script> </html>
jQuery选项卡
最新推荐文章于 2022-10-24 17:31:20 发布