使用HTML/CSS/JS如何实现点击不同图书馆条目后在另一页展示对应内容

纯前端HTML/CSS/JS技术栈下，有两种常用实现方式，按需选择即可：

方案1：URL查询参数传递（最推荐） #

优势是支持详情页书签保存、链接分享，是绝大多数内容类网站的通用方案。

步骤1：列表页改造 #

给每个图书条目跳转链接拼接唯一标识ID，示例代码如下：

<!-- 列表页 list.html 条目示例 -->
<div class="book-item">
  <a href="detail.html?id=1">
    <h3>百年孤独</h3>
    <p>作者：加西亚·马尔克斯</p>
  </a>
</div>
<div class="book-item">
  <a href="detail.html?id=2">
    <h3>活着</h3>
    <p>作者：余华</p>
  </a>
</div>

如果列表是JS动态生成的，循环拼接ID参数即可。

步骤2：详情页逻辑 #

页面加载时解析URL参数，匹配对应图书数据后渲染到页面：

// 详情页 detail.html 逻辑
// 1. 定义图书数据源，可单独抽为bookData.js文件多页面引入
const bookData = [
  {
    id: 1,
    name: '百年孤独',
    author: '加西亚·马尔克斯',
    publishTime: '1967年',
    intro: '魔幻现实主义文学代表作，描写布恩迪亚家族七代人的传奇故事...'
  },
  {
    id: 2,
    name: '活着',
    author: '余华',
    publishTime: '1992年',
    intro: '讲述大时代背景下主人公福贵的一生遭遇...'
  }
]

// 2. 解析URL中的图书ID参数
function getQueryParam(key) {
  const urlParams = new URLSearchParams(window.location.search)
  return urlParams.get(key)
}
const currentBookId = Number(getQueryParam('id'))

// 3. 匹配数据渲染页面
if (currentBookId) {
  const currentBook = bookData.find(item => item.id === currentBookId)
  if (currentBook) {
    document.getElementById('book-name').textContent = currentBook.name
    document.getElementById('book-author').textContent = currentBook.author
    document.getElementById('book-publish').textContent = currentBook.publishTime
    document.getElementById('book-intro').textContent = currentBook.intro
  } else {
    document.getElementById('book-detail').innerHTML = '<p>该图书不存在</p>'
  }
} else {
  // 无ID参数时跳转回列表页
  window.location.href = 'list.html'
}

对应详情页HTML结构示例：

<!-- detail.html 页面结构 -->
<div id="book-detail">
  <h1 id="book-name"></h1>
  <p>作者：<span id="book-author"></span></p>
  <p>出版时间：<span id="book-publish"></span></p>
  <div class="intro">
    <h3>内容简介</h3>
    <p id="book-intro"></p>
  </div>
</div>

方案2：localStorage存储传递 #

适合参数敏感、不想暴露在URL中的场景，缺点是不支持详情页单独分享。

步骤1：列表页绑定点击事件 #

点击条目时存储选中的图书ID，再跳转详情页：

// 列表页JS逻辑
document.querySelectorAll('.book-item').forEach(item => {
  item.addEventListener('click', function() {
    // 提前将图书ID存在元素的data-book-id属性上
    const bookId = this.dataset.bookId
    localStorage.setItem('currentBookId', bookId)
    window.location.href = 'detail.html'
  })
})

步骤2：详情页读取数据渲染 #

和方案1逻辑基本一致，仅参数获取方式替换为从localStorage读取：

const currentBookId = Number(localStorage.getItem('currentBookId'))
// 后续匹配、渲染逻辑和方案1完全相同

注意事项 #

• 图书数据源建议单独抽成JS文件，两个页面统一引入，避免数据重复维护
• 后续数据量变大时，可以把数据存在单独的JSON文件中，用fetch异步请求获取即可
• 可按需扩展图书字段，比如封面图、ISBN、馆藏位置等，渲染逻辑同理

内容的提问来源于stack exchange，提问作者EmielV