jQuery-tab栏切换

最新推荐文章于 2022-10-02 14:55:22 发布

前端笨鸟

最新推荐文章于 2022-10-02 14:55:22 发布

阅读量109

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41670147/article/details/103446904

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: auto;
            overflow: hidden;
        }
        
        .nav {
            float: left;
        }
        
        .nav li {
            width: 60px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            background-color: pink;
            border-bottom: 1px solid #eee;
            text-align: center;
        }
        
        .nav li:first-child {
            background-color: salmon;
        }
        
        .nav li:hover {
            background-color: salmon;
        }
        
        .content {
            float: left;
            width: 136px;
            background-color: salmon;
            height: 92px;
        }
        
        .content div {
            display: none;
        }
        
        .content div:first-child {
            display: block;
        }
    </style>

</head>

<body>
    <div class="box">
        <ul class="nav">
            <li>标题1</li>
            <li>标题2</li>
            <li>标题3</li>
        </ul>
        <div class="content">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <script>
        $(function() {
            $(".nav li").mouseover(function() {
                var index = $(this).index();
                $(this).css("background", "salmon");
                $(this).siblings("li").css("background", "pink")

                $(".content div").eq(index).show();
                $(".content div").eq(index).siblings().hide();
            })
        })
    </script>
</body>

</html>

在这里插入图片描述

前端笨鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-tab栏切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫