JQ之tab切换栏

发布时间：2024年01月04日

我为大家介绍一下使用jq实现tab切换栏
非常的简单方便
上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div>1</div>
    <div style="display: none;">2</div>
    <div style="display: none;">3</div>
</body>
<script src="../js/jquery-1.8.3.js"></script>
<script>
    $("ul li").on("click", function () {
        // 获取下标
        let index = $(this).index()
        // 我们点击li之后 使用eq选择div 它所有的兄弟隐藏 自身显示
        $("div").eq(index).show().siblings("div").hide()
    })
</script>
</html>

效果图：
请添加图片描述

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

文章来源:https://blog.csdn.net/m0_74577714/article/details/135347809
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章