javascript - 如何在左侧创建导航栏，在右侧创建容器？

Question

我想做一个这样的模板：

这是 HTML：

<div class="wrapper">
  <div class="label">label A</div>
  <div class="text">text A text A text A</div>

  <div class="label">label B</div>
  <div class="text">text B text B text B</div>

  <div class="label">label C</div>
  <div class="text">text C text C text C</div>
</div>

我想将所有标签标签显示为左侧的导航，内容在右侧

注意：不能包装标签，只需使用该示例代码。

标签： javascriptjqueryhtmlcss

Answer 1

我对“无法包装标签”的意思感到困惑。你是说你根本不能编辑 HTML 吗？您设置它的方式将使获得您想要的效果变得具有挑战性。

我要做的是在同一层次结构上有 2 个包装器，一个包含标签菜单，另一个包含子菜单。

<div class="wrapper">
  <div class="label">label A</div>
  <div class="label">label B</div>
  <div class="label">label C</div>
</div>
<div class="wrapper-2">
  <div class="text">text A text A text A</div>
  <div class="text">text B text B text B</div>
  <div class="text">text C text C text C</div>
</div>