如何在HTML5中实现可添加子页面并拖动分隔边框的功能？

嘿，这个需求其实挺常见的，我给你整一个入门级的实现方案，用原生HTML、CSS和JS就能搞定，不用依赖复杂框架，先帮你理清核心逻辑～

核心思路很简单：用一个弹性容器承载所有子页面，子页面之间插入可拖动的分隔条；点击「+」按钮时，在容器末尾新增分隔条和子页面；通过JS监听分隔条的鼠标事件，实时调整相邻子页面的宽度。

1. 基础HTML结构 #

先搭好页面的骨架，主容器装子页面和分隔条，再放一个新增按钮：

<div class="split-container">
  <div class="panel">子页面 1</div>
  <div class="splitter"></div>
  <div class="panel">子页面 2</div>
</div>
<button id="addPanel">+ 新增子页面</button>

2. CSS样式处理 #

给容器、子页面和分隔条设置样式，让分隔条看起来可交互：

.split-container {
  display: flex;
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
}

.panel {
  flex: 1;
  padding: 10px;
  overflow: auto; /* 子页面内容过多时自动滚动 */
  border: 1px solid #eee;
}

.splitter {
  width: 5px;
  background-color: #ddd;
  cursor: col-resize; /* 鼠标悬停显示左右箭头 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.splitter:hover {
  background-color: #bbb; /* hover时加深颜色提示可拖动 */
}

#addPanel {
  margin: 10px 0;
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
}

3. 分隔条拖动逻辑（JS） #

用原生JS监听鼠标事件，实现拖动时调整子页面宽度的功能：

// 初始化所有分隔条的拖动功能
function initSplitters() {
  const splitters = document.querySelectorAll('.splitter');
  splitters.forEach(splitter => {
    // 移除旧的事件监听，避免重复绑定
    splitter.removeEventListener('mousedown', startDrag);
    splitter.addEventListener('mousedown', startDrag);
  });
}

function startDrag(e) {
  const splitter = e.target;
  const container = splitter.parentElement;
  const prevPanel = splitter.previousElementSibling;
  const nextPanel = splitter.nextElementSibling;
  const startX = e.clientX;
  const prevPanelStartWidth = prevPanel.offsetWidth;
  const nextPanelStartWidth = nextPanel.offsetWidth;

  // 全局监听鼠标移动和松开事件
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', stopDrag);

  function drag(e) {
    const deltaX = e.clientX - startX;
    const newPrevWidth = prevPanelStartWidth + deltaX;
    const newNextWidth = nextPanelStartWidth - deltaX;

    // 防止子页面被拖到太小（最小宽度100px）
    if (newPrevWidth < 100 || newNextWidth < 100) return;

    // 用flex-basis设置宽度，适配弹性布局
    prevPanel.style.flexBasis = `${newPrevWidth}px`;
    nextPanel.style.flexBasis = `${newNextWidth}px`;
  }

  function stopDrag() {
    // 拖动结束后移除全局监听，避免影响其他操作
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', stopDrag);
  }
}

// 页面加载完成后初始化分隔条
document.addEventListener('DOMContentLoaded', initSplitters);

4. 新增子页面功能（JS） #

给「+」按钮绑定点击事件，每次点击新增分隔条和子页面：

document.getElementById('addPanel').addEventListener('click', () => {
  const container = document.querySelector('.split-container');
  const panelCount = container.querySelectorAll('.panel').length;

  // 创建新的分隔条和子页面
  const splitter = document.createElement('div');
  splitter.className = 'splitter';
  
  const newPanel = document.createElement('div');
  newPanel.className = 'panel';
  newPanel.textContent = `子页面 ${panelCount + 1}`;
  
  // 添加到容器末尾
  container.appendChild(splitter);
  container.appendChild(newPanel);
  
  // 重新初始化新的分隔条，让它支持拖动
  initSplitters();
});

额外提示 #

• 上面是水平分割的例子，如果需要垂直分割，只需要把容器的flex-direction改成column，分隔条的width改成height，cursor改成row-resize，拖动逻辑里把clientX换成clientY、宽度换成高度即可。
• 可以进一步优化：比如给子页面添加关闭按钮、保存布局状态、支持嵌套分割等。
• 如果后续需要更复杂的功能，也可以考虑使用成熟的库，但入门阶段先用原生JS实现，能更好理解底层逻辑。

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