jquery实现点击左侧标题右侧展示对应的内容

原创

mob64ca12da726f 2024-07-20 04:37:41 ©著作权

文章标签 jQuery HTML 流程图 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12da726f的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery实现点击左侧标题右侧展示对应的内容

作为一名经验丰富的开发者，我很高兴能帮助刚入行的小白实现“jQuery实现点击左侧标题右侧展示对应的内容”的功能。接下来，我将通过一篇文章，详细地介绍实现这一功能的流程、代码和注释。

流程图

首先，我们用流程图来展示整个实现过程：

flowchart TD
    A[开始] --> B{准备HTML结构}
    B --> C{准备CSS样式}
    C --> D{编写jQuery脚本}
    D --> E{测试功能}
    E --> F[结束]

步骤详解

1. 准备HTML结构

首先，我们需要准备一个简单的HTML结构，包括左侧的标题列表和右侧的内容区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现点击左侧标题右侧展示对应的内容</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <ul class="nav">
            <li data-target="#content1">标题1</li>
            <li data-target="#content2">标题2</li>
            <li data-target="#content3">标题3</li>
        </ul>
        <div class="content">
            <div id="content1">这里是内容1</div>
            <div id="content2">这里是内容2</div>
            <div id="content3">这里是内容3</div>
        </div>
    </div>
    <script src="
    <script src="script.js"></script>
</body>
</html>

2. 准备CSS样式

接下来，我们需要为页面添加一些基本的CSS样式，以确保布局的美观。

.container {
    display: flex;
}

.nav {
    width: 200px;
    list-style: none;
    padding: 0;
}

.nav li {
    cursor: pointer;
    padding: 8px;
    border-bottom: 1px solid #ccc;
}

.content {
    flex-grow: 1;
    padding: 20px;
    border-left: 1px solid #ccc;
}

.content div {
    display: none;
}

3. 编写jQuery脚本

现在，我们需要编写jQuery脚本来实现点击左侧标题时，右侧展示对应的内容。

$(document).ready(function() {
    // 点击标题时触发事件
    $('.nav li').click(function() {
        // 隐藏所有内容区域
        $('.content div').hide();
        // 根据data-target属性获取目标内容区域的ID
        var target = $(this).data('target');
        // 显示目标内容区域
        $(target).show();
    });
});