左侧导航栏右侧内容页原生HTML+JS实现

晏肠冲Jessie

于 2024-09-05 23:06:25 发布

阅读量401

点赞数 4

本文链接：https://blog.csdn.net/gitblog_09798/article/details/141944588

版权

左侧导航栏右侧内容页原生HTML+JS实现

menu-demo.rar项目地址:https://gitcode.com/open-source-toolkit/4b6a8

概述

本文档 accompanying 仓库资源，专注于展示如何不依赖任何前端框架，仅使用原生HTML、CSS和JavaScript来实现一个经典的网页布局：左侧为导航栏，右侧为内容显示区域。这种布局广泛应用于多种网站设计中，如文档站点、管理后台等，因其高效的信息导航和屏幕利用率而备受青睐。

实现目标

纯原生开发：不引入外部库或框架。
响应式考虑（可选）：适应不同屏幕尺寸，保证在移动端也能良好展示。
交互体验：点击左侧导航项时，右侧相应的内容区能平滑切换内容。

技术栈

HTML5：用于页面结构定义。
CSS3：负责样式布局与美化。
JavaScript：实现动态切换内容逻辑。

快速开始

下载资源：从本仓库下载全部文件到本地。
编辑HTML：index.html是入口文件，其中定义了基本的页面结构。
样式定制：使用style.css定制页面外观，包括导航栏和内容区域的样式。
脚本编写：在script.js中添加JavaScript代码，处理导航点击事件，并根据选择的选项动态改变右侧内容。

<!-- 示例 HTML 结构片段 -->
<div id="sidebar">
    <!-- 导航链接 -->
</div>
<div id="content">
    <!-- 内容区，通过JS替换内容 -->
</div>

核心原理

HTML结构：确保有一个包含导航链接的容器（如#sidebar）和一个作为内容展示区的容器（如#content）。
CSS布局：利用Flexbox或Grid布局实现两侧布局，保持左侧固定宽度，右侧自适应扩展。
JavaScript逻辑：为每个导航链接绑定点击事件，通过监听这些事件，根据点击的链接ID，动态改变内容区(#content)的内容。

示例代码简介

在script.js中找到如下示例代码，这是实现核心逻辑的关键：

// 假设每个导航项有data-target属性指向对应的内容id
document.querySelectorAll('#sidebar a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('data-target');
        // 动态加载或切换右侧内容，简化示意
        document.querySelector('#content').innerHTML = loadContent(targetId);
    });
});

// 函数loadContent应根据targetId获取对应内容，这里需自定义实现
function loadContent(id) {
    // 根据实际情况，可能是Ajax请求，或者是预先定义好的内容模板切换
    return '<div>这里是 ' + id + ' 的内容。</div>';
}