653 lines
24 KiB
HTML
653 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>智慧评标-主观分助手 | 产品手册</title>
|
||
<!-- 引入 Inter 字体，提升阅读体验 -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--primary-color: #2563eb;
|
||
--primary-dark: #1d4ed8;
|
||
--secondary-color: #4f46e5;
|
||
--text-color: #334155;
|
||
--heading-color: #0f172a;
|
||
--bg-color: #f8fafc;
|
||
--card-bg: #ffffff;
|
||
--sidebar-width: 280px;
|
||
--header-height: 64px;
|
||
--border-color: #e2e8f0;
|
||
--success-color: #10b981;
|
||
--warning-color: #f59e0b;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
scroll-padding-top: var(--header-height);
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
color: var(--text-color);
|
||
background-color: var(--bg-color);
|
||
display: flex;
|
||
min-height: 100vh;
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* Sidebar Styles */
|
||
.sidebar {
|
||
width: var(--sidebar-width);
|
||
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
|
||
color: white;
|
||
position: fixed;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||
z-index: 50;
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.logo {
|
||
padding: 24px;
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: #fff;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.nav-links {
|
||
list-style: none;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.nav-link {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px 24px;
|
||
color: #94a3b8;
|
||
text-decoration: none;
|
||
transition: all 0.2s;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
color: #fff;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.nav-link.active {
|
||
color: #fff;
|
||
background-color: rgba(59, 130, 246, 0.1);
|
||
border-left-color: var(--primary-color);
|
||
}
|
||
|
||
/* Nav Group Title */
|
||
.nav-group-title {
|
||
padding: 8px 24px;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
color: #64748b;
|
||
font-weight: 600;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* Main Content Styles */
|
||
.main-content {
|
||
margin-left: var(--sidebar-width);
|
||
flex: 1;
|
||
background-color: var(--bg-color);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.header {
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
height: var(--header-height);
|
||
border-bottom: 1px solid var(--border-color);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 40px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 40;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.header h3 {
|
||
color: var(--text-color);
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.content-wrapper {
|
||
padding: 40px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
section {
|
||
background: var(--card-bg);
|
||
border-radius: 16px;
|
||
padding: 48px;
|
||
margin-bottom: 32px;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1.5rem;
|
||
color: var(--heading-color);
|
||
font-weight: 800;
|
||
letter-spacing: -1px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.875rem;
|
||
margin-bottom: 1.5rem;
|
||
color: var(--heading-color);
|
||
font-weight: 700;
|
||
letter-spacing: -0.5px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 2px solid var(--border-color);
|
||
margin-top: 0;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.35rem;
|
||
margin: 2rem 0 1rem;
|
||
color: var(--heading-color);
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.125rem;
|
||
margin-bottom: 0.75rem;
|
||
margin-top: 1.5rem;
|
||
color: var(--heading-color);
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 1.25rem;
|
||
color: var(--text-color);
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
ul,
|
||
ol {
|
||
margin-left: 24px;
|
||
margin-bottom: 1.5rem;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
/* Images */
|
||
.img-container {
|
||
margin: 24px 0 32px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border-color);
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.img-container img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.img-caption {
|
||
text-align: center;
|
||
font-size: 0.9rem;
|
||
color: #64748b;
|
||
margin-top: 8px;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Tables */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-bottom: 1.5rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 12px 16px;
|
||
border: 1px solid var(--border-color);
|
||
text-align: left;
|
||
}
|
||
|
||
th {
|
||
background-color: #f1f5f9;
|
||
font-weight: 600;
|
||
color: var(--heading-color);
|
||
}
|
||
|
||
td {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Feature Cards */
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 24px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: #fff;
|
||
padding: 24px;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border-color);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.feature-card h4 {
|
||
margin-top: 0;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* Step List */
|
||
.step-list {
|
||
counter-reset: step;
|
||
list-style: none;
|
||
margin: 0;
|
||
}
|
||
|
||
.step-list li {
|
||
position: relative;
|
||
padding-left: 40px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.step-list li::before {
|
||
counter-increment: step;
|
||
content: counter(step);
|
||
position: absolute;
|
||
left: 0;
|
||
top: 2px;
|
||
width: 24px;
|
||
height: 24px;
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 24px;
|
||
font-size: 0.85rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Badge */
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 4px 12px;
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
background-color: #dbeafe;
|
||
color: var(--primary-color);
|
||
vertical-align: middle;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.sidebar {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.main-content {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.header {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.content-wrapper {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<aside class="sidebar">
|
||
<div class="logo">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round" />
|
||
<path d="M2 17L12 22L22 17" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round" />
|
||
<path d="M2 12L12 17L22 12" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round" />
|
||
</svg>
|
||
智慧评标助手
|
||
</div>
|
||
<ul class="nav-links">
|
||
<li class="nav-item"><a href="#intro" class="nav-link active">产品概述</a></li>
|
||
|
||
<div class="nav-group-title">核心功能</div>
|
||
<li class="nav-item"><a href="#start" class="nav-link">快速入门</a></li>
|
||
<li class="nav-item"><a href="#summary" class="nav-link">概括总结</a></li>
|
||
<li class="nav-item"><a href="#qa" class="nav-link">智能问答</a></li>
|
||
<li class="nav-item"><a href="#comparison" class="nav-link">横向对比</a></li>
|
||
|
||
<div class="nav-group-title">其他</div>
|
||
<li class="nav-item"><a href="#review" class="nav-link">评审与评分</a></li>
|
||
<li class="nav-item"><a href="#faq" class="nav-link">常见问题</a></li>
|
||
<li class="nav-item"><a href="#support" class="nav-link">联系方式</a></li>
|
||
</ul>
|
||
</aside>
|
||
|
||
<main class="main-content">
|
||
<header class="header">
|
||
<h3>文档中心 / 用户手册 v1.0</h3>
|
||
<div style="font-size: 0.9em; color: #64748b;">最后更新: 2025-08-15</div>
|
||
</header>
|
||
|
||
<div class="content-wrapper">
|
||
<!-- 产品概述 -->
|
||
<section id="intro">
|
||
<h1>主观分评审助手 <span class="badge">v1.0</span></h1>
|
||
|
||
<!-- 产品介绍视频 -->
|
||
<div class="img-container" style="border:none; box-shadow:none; background:transparent;">
|
||
<video controls width="100%"
|
||
style="border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);">
|
||
<source src="./主观分助手.mp4" type="video/mp4">
|
||
您的浏览器不支持视频播放，请下载视频观看。
|
||
</video>
|
||
<div class="img-caption">产品功能演示视频</div>
|
||
</div>
|
||
|
||
<div class="img-container">
|
||
<img src="./images/主页.jpeg" alt="产品主页展示">
|
||
<div class="img-caption">产品主界面：清晰的卡片式布局与专业配色</div>
|
||
</div>
|
||
|
||
<h3>1.2 产品简介</h3>
|
||
<p>主观分评审助手v1.0是深度集成于智慧评审系统的AI辅助工具，基于LLM（大型语言模型）和RAG（检索增强生成）技术，提供<strong>智能问答</strong>、<strong>概括总结</strong>、<strong>横向对比</strong>三大核心功能。产品旨在通过智能化手段，帮助用户快速定位投标文件关键信息、建立方案整体认知、实现多供应商方案标准化对比，最终提升评审效率、保障评审公平性。
|
||
</p>
|
||
|
||
<h3>1.3 适用范围</h3>
|
||
<p>本手册适用于使用智慧评审系统进行招投标项目评审的专家，涵盖技术、财务、服务等各类主观分评审场景。</p>
|
||
|
||
<h3>1.4 环境要求</h3>
|
||
<ul>
|
||
<li><strong>运行环境</strong>：需在智慧评审系统内使用，支持主流浏览器（Chrome 90+、Edge 90+、Firefox 88+）；</li>
|
||
<li><strong>权限要求</strong>：需具备对应招投标项目的评审权限（由系统管理员分配）；</li>
|
||
<li><strong>文档要求</strong>：仅支持可正常读取的PDF、Word格式投标文件，暂不支持加密、手写版、图片密集型文档。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 快速入门 -->
|
||
<section id="start">
|
||
<h2>二、核心功能快速入门</h2>
|
||
<p>产品全程嵌入智慧评审系统，以“评审助手”按钮为核心入口，操作流程遵循“准备-概览-质询-对比-结论”逻辑。</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4>Step 1: 启动</h4>
|
||
<p>登录系统，在主观分评审项（如服务方案）旁点击【评审助手】按钮。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Step 2: 概览</h4>
|
||
<p>使用【概括总结】功能，快速了解各供应商方案框架与核心内容。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Step 3: 质询</h4>
|
||
<p>通过【智能问答】功能，精准检索细节，支持跨文档对比提问。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Step 4: 对比</h4>
|
||
<p>使用【横向对比】生成多维度对比矩阵，辅助打分。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 概括总结 -->
|
||
<section id="summary">
|
||
<h2>3.2 概括总结功能操作</h2>
|
||
<p>自动提取投标文件的层级目录，生成各章节核心摘要，帮助用户快速建立对方案的整体认知，替代传统逐页阅读。</p>
|
||
|
||
<div class="img-container">
|
||
<img src="./images/概括总结.jpeg" alt="概括总结界面">
|
||
<div class="img-caption">目录提取与章节智能摘要</div>
|
||
</div>
|
||
|
||
<div class="img-container">
|
||
<img src="./images/概括总结答案.jpeg" alt="概括总结详细内容">
|
||
<div class="img-caption">生成的详细章节总结，支持点击原文</div>
|
||
</div>
|
||
|
||
<h3>操作步骤</h3>
|
||
<ul class="step-list">
|
||
<li>在评审助手主界面，点击【概括总结】按钮，进入功能界面；</li>
|
||
<li>系统自动加载当前评审项对应的所有供应商投标文件，左侧显示“供应商列表”；</li>
|
||
<li>选择目标供应商，系统自动提取该供应商方案的树状目录（含章节标题及页码）；</li>
|
||
<li>点击目录任意章节，右侧“摘要展示区”实时显示该章节AI摘要；</li>
|
||
<li>点击摘要中“查看原文”链接，可直达投标文件对应页码预览。</li>
|
||
</ul>
|
||
|
||
<div class="feature-card" style="background:#fff7ed; border-color:#fed7aa; margin-top:20px;">
|
||
<h4 style="color:#c2410c">⚠️ 注意事项</h4>
|
||
<p style="color:#9a3412; margin-bottom:0">摘要通常30秒内完成。若投标文件有更新，请点击【刷新】按钮重新提取。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 智能问答 -->
|
||
<section id="qa">
|
||
<h2>3.3 智能问答功能操作</h2>
|
||
<p>支持自然语言提问，基于检索增强生成(RAG)技术，精准检索相关信息并生成答案，附带原文溯源。</p>
|
||
|
||
<div class="img-container">
|
||
<img src="./images/智能问答对话页面.jpeg" alt="智能问答对话界面">
|
||
<div class="img-caption">支持多轮对话与原文溯源</div>
|
||
</div>
|
||
|
||
<div class="img-container">
|
||
<img src="./images/智能问答选择文件.jpeg" alt="多文档选择">
|
||
<div class="img-caption">支持同时勾选多个文档进行对比提问</div>
|
||
</div>
|
||
|
||
<h3>操作步骤</h3>
|
||
<ul class="step-list">
|
||
<li>点击【文档问答】按钮，进入功能界面；</li>
|
||
<li>通过“文件选择器”勾选需要提问的投标文件（单选深入挖掘，多选横向对比）；</li>
|
||
<li>输入自然语言问题（如“A公司自研时序数据库的性能指标是什么？”）；</li>
|
||
<li>点击发送，系统生成答案并标注来源（如 <code>来源：P28，3.1章节</code>）；</li>
|
||
<li>点击来源标注可直接跳转原文高亮查看。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 横向对比 -->
|
||
<section id="comparison">
|
||
<h2>3.4 横向对比功能操作</h2>
|
||
<p>支持选择多供应商、多维度进行方案对比，系统生成标准化对比矩阵，直观呈现优劣差异。</p>
|
||
|
||
<div class="img-container">
|
||
<img src="./images/横向对比页面.jpeg" alt="横向对比配置">
|
||
<div class="img-caption">Step 1: 配置对比维度与厂商</div>
|
||
</div>
|
||
|
||
<div class="img-container">
|
||
<img src="./images/横向对比结果.jpeg" alt="横向对比结果矩阵">
|
||
<div class="img-caption">Step 2: 查看多维度对比矩阵结果</div>
|
||
</div>
|
||
|
||
<h3>核心流程</h3>
|
||
<div class="feature-grid">
|
||
<div>
|
||
<h4>1. 配置 (P4页面)</h4>
|
||
<ul>
|
||
<li>选择预设评审模块或添加“自定义维度”</li>
|
||
<li>勾选需对比的2家及以上供应商</li>
|
||
<li>点击【开始解析对比】启动异步任务</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>2. 查看 (P5页面)</h4>
|
||
<ul>
|
||
<li>任务完成后自动展示对比矩阵</li>
|
||
<li>每行代表一个维度，每列代表一家厂商</li>
|
||
<li>若结果不满意，支持单维度【重新生成】</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 评审与评分 -->
|
||
<section id="review">
|
||
<h2>3.5 评审意见填写与评分</h2>
|
||
<p>完成概览、质询、对比后，可直接在评审助手侧边栏下方的“评审意见”输入区填写评审结论。填写完成后，点击输入区下方【保存】按钮，意见会同步至智慧评审系统的对应区域。</p>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section id="faq">
|
||
<h2>四、常见问题与解决方法</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th width="25%">常见问题</th>
|
||
<th width="35%">可能原因</th>
|
||
<th width="40%">解决方法</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>点击“评审助手”无响应</td>
|
||
<td>浏览器缓存异常；无权限</td>
|
||
<td>刷新页面或清除缓存；联系管理员确认权限</td>
|
||
</tr>
|
||
<tr>
|
||
<td>无法生成摘要</td>
|
||
<td>文档加密；文档过大</td>
|
||
<td>联系招标方获取非加密文档；耐心等待处理</td>
|
||
</tr>
|
||
<tr>
|
||
<td>问答不准确或无来源</td>
|
||
<td>问题模糊；文档无相关信息</td>
|
||
<td>优化问题表述；确认文档相关性</td>
|
||
</tr>
|
||
<tr>
|
||
<td>横向对比时间过长</td>
|
||
<td>对比厂商/维度过多</td>
|
||
<td>建议每次对比厂商≤5家，维度≤8个</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section id="support">
|
||
<h2>五、联系方式与支持</h2>
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4>📞 技术支持</h4>
|
||
<p>电话：400-XXXX-XXXX<br><span style="font-size:0.9em; color:#64748b">(工作日 9:00-18:00)</span></p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>📧 邮箱支持</h4>
|
||
<p>support@xxx.com<br><span style="font-size:0.9em; color:#64748b">(24小时内回复)</span></p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>💬 系统反馈</h4>
|
||
<p>登录系统 -> 【帮助中心】 -> 【问题反馈】提交工单。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 24px; font-size: 0.9em; color: #94a3b8; text-align: center;">
|
||
注：文档部分辅助内容可能由AI生成，请以实际评审要求为准。
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
// 平滑滚动与导航高亮
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const targetId = this.getAttribute('href');
|
||
const targetSection = document.querySelector(targetId);
|
||
|
||
if (targetSection) {
|
||
targetSection.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
|
||
history.pushState(null, null, targetId);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 滚动监听 (Scroll Spy)
|
||
const observerOptions = {
|
||
root: null,
|
||
rootMargin: '-20% 0px -60% 0px',
|
||
threshold: 0
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const id = entry.target.getAttribute('id');
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href') === '#' + id) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('section').forEach(section => {
|
||
observer.observe(section);
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |