jQuery选项卡

最新推荐文章于 2021-08-06 22:15:17 发布

原创最新推荐文章于 2021-08-06 22:15:17 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

  <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>