如何控制HTML中两个UL间距并通过JS切换显示，实现列表项合并？

嘿，这问题不难解决！咱们一步步来，既要让两个<ul>里的列表项看起来像同一个列表，又能通过JS控制它们的显示隐藏，还能调节间距，安排👇

第一步：让两个列表视觉上统一 #

默认的<ul>自带内边距和外边距，这会让两个列表看起来脱节。咱们用CSS把这些默认样式重置掉，让它们的li对齐，看起来像一个整体：

/* 重置ul的默认样式，让两个列表视觉统一 */
#First, #Second {
  list-style: none; /* 去掉默认的圆点 */
  padding-left: 20px; /* 统一左侧内边距，让li对齐 */
  margin: 0; /* 先去掉默认外边距，后面再按需调整间距 */
}

/* 保持li的样式一致（可选，让列表项更美观） */
#First li, #Second li {
  margin: 4px 0; /* 给每个列表项加一点上下间距 */
}

第二步：控制两个ul之间的间距 #

现在两个ul已经无缝衔接了，如果需要调整它们之间的间距，直接给其中一个ul加外边距就行。比如想让它们之间有10px的间距：

/* 给第一个ul的底部加间距，或者给第二个ul的顶部加，效果一致 */
#First {
  margin-bottom: 10px;
}
/* 或者 */
/* #Second {
  margin-top: 10px;
} */

如果不想有间距，保持margin:0就好，两个列表会完全挨在一起，看起来就是一个完整列表。

第三步：优化JS控制逻辑 #

你原来的JS代码已经能用，不过可以封装成函数，切换显示会更方便：

// 封装成函数，传入要显示的ul的id即可
function showList(targetId) {
  // 先把两个列表都隐藏
  document.getElementById('First').style.display = 'none';
  document.getElementById('Second').style.display = 'none';
  // 再显示目标列表
  document.getElementById(targetId).style.display = 'block';
}

// 调用示例：显示第一个列表
showList('First');
// 显示第二个列表
// showList('Second');

完整代码示例 #

把这些整合到一起，就是这样：

<ul id="First"> 
  <li>First item</li> 
  <li>Second item</li> 
</ul> 
<ul id="Second"> 
  <li>Third item</li> 
</ul>

<style>
#First, #Second {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}
#First {
  margin-bottom: 10px; /* 按需调整间距 */
}
#First li, #Second li {
  margin: 4px 0;
}
</style>

<script>
function showList(targetId) {
  document.getElementById('First').style.display = 'none';
  document.getElementById('Second').style.display = 'none';
  document.getElementById(targetId).style.display = 'block';
}

// 页面加载完成后默认显示第一个列表
window.onload = function() {
  showList('First');
};
</script>

这样操作下来，两个列表的视觉效果就和一个列表一样了，还能轻松用JS切换显示，间距也能随意调整～

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