jquery 左侧菜单右侧

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在构建左侧菜单与右侧内容联动的网页布局时，jQuery 可以提供便捷的操作。

基础概念

左侧菜单右侧内容布局通常指的是网页左侧有一个固定的导航菜单，用户点击菜单项时，右侧的内容区域会根据所选菜单项动态更新显示相应的内容。

类型与应用场景

静态内容切换：适用于内容量不大，不需要频繁更新的网站。
动态内容加载：适用于内容丰富、需要实时更新的网站，如新闻门户、博客等。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 实现左侧菜单与右侧内容的联动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 左侧菜单右侧内容</title>
    <style>
        #menu { width: 200px; float: left; }
        #content { margin-left: 220px; }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="menu">
    <ul>
        <li><a href="#" data-target="home">首页</a></li>
        <li><a href="#" data-target="about">关于我们</a></li>
        <li><a href="#" data-target="contact">联系我们</a></li>
    </ul>
</div>

<div id="content">
    <!-- 内容将根据菜单选择动态加载 -->
</div>

<script>
$(document).ready(function() {
    $('#menu a').click(function(e) {
        e.preventDefault();
        var target = $(this).data('target');
        $('#content').load(target + '.html'); // 假设内容放在同名的 .html 文件中
    });
});
</script>

</body>
</html>