用jQuery实现网页的标签页效果

最新推荐文章于 2024-01-09 16:02:28 发布

Bravo！！！

最新推荐文章于 2024-01-09 16:02:28 发布

阅读量318

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_47982238/article/details/108001953

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
            margin:0px;
            padding:0px;
        }
        
        .menu{
            height:50px;
            background: #272822;
            line-height: 50px;
        }       

        .menu ul{
            list-style:none;
        }

        .menu ul li{
            float: left;
            color:#fff;
            margin-left:15px;
            line-height: 50px;
            width:100px;
            text-align:center;
        }

        .menu ul li:hover{
            cursor: pointer;
            background: #ccc;   
        }

        .info{
            height:256px;
            background: #ccc;
            overflow: hidden;
            padding:15px;
        }

        .info p{
            display: none;
        }

        .info p:first-child{
            display: block;
        }

        .menu a:hover{
            background: #ccc;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
    <div class='menu'>
        <ul>
            <li>dog</li>
            <li>sheep</li>
            <li>basketball</li>
        </ul>   
    </div>

    <div class='info'>
         <p><img src="dog.png" alt="" /></p>
         <p><img src="sheep.png" alt="" /></p>
         <p><img src="bk.png" alt="" /></p>
    </div>
</body>
<script>
$('.menu li').eq(0).css({'background':'#ccc'});

$('.menu li').mouseenter(function(){
    $(this).css({'background':'#ccc'});
    $('.menu li').not($(this)).css({'background':'#272822'});


    idx=$(this).index('.menu li');
    //index的作用：搜索匹配的元素，并返回相应元素的索引值，从0开始计数
    $('.info p').eq(idx).show();
    $('.info p').not($('.info p').eq(idx)).hide();
});
</script>
</html>

Bravo！！！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现网页的标签页效果

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style> *{ font-family: 微软雅黑; margin:0px; padding:0px; } .
复制链接

扫一扫

专栏目录