Question

我有一个包含3个部分的HTML DIV：头部，身体和脚部。

我添加了2个标签，点击后应更改身体，脚和头部。头部中的标签UL不应更改。所以我认为我的标记并不理想：

.window {
  max-width: 600px;
  background-color: #f0f0f0;
}
ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
ul li a {
  text-decoration: none;
  color: white;
  background-color: indigo;
  padding: 4px;
  display: block;
}
ul.tabs {
  float: left;
}
ul.actions {
  float: right;
}
div.head {
  overflow: hidden;
  background-color: red;
}
div.body {
  background-color: green;
  color: white;
}
div.foot {
  background-color: orange;
  color: white;
}

<div class="window">

  <div class="head">

    <ul class="tabs">
      <li><a href="#tab1">Tab1</a>
      </li>
      <li><a href="#tab2">Tab2</a>
      </li>
    </ul>

    <ul class="actions">
      <li><a href="#action1">Action 1</a>
      </li>
      <li><a href="#action2">Action 2</a>
      </li>
    </ul>

  </div>

  <div class="body">
    <div class="body-1">Body 1</div>
    <div class="body-2">Body 2</div>
  </div>

  <div class="foot">
    <div class="foot-1">Foot 1</div>
    <div class="foot-2">Foot 2</div>
  </div>

</div>

注意：我仍然希望在标签右侧执行操作...

你对标记有什么建议？
我将使用JQuery在各部分之间切换。

Answer 1

听起来你需要四个部分。如果您不希望更改选项卡，请将它们放在不同的部分中。然后你的jQuery代码可以改变头部，标签将不受影响。

<div class="window">

  <div class="tab-section">
    <ul class="tabs">
      <li><a href="#tab1">Tab1</a>
      </li>
      <li><a href="#tab2">Tab2</a>
      </li>
    </ul>
  </div>

  <div class="head">
    <ul class="actions">
      <li><a href="#action1">Action 1</a>
      </li>
      <li><a href="#action2">Action 2</a>
      </li>
    </ul>
  </div>

  <div class="body">
    <div class="body-1">Body 1</div>
    <div class="body-2">Body 2</div>
  </div>

  <div class="foot">
    <div class="foot-1">Foot 1</div>
    <div class="foot-2">Foot 2</div>
  </div>

</div>

或者，让我们说出于某种原因你真的只想要三个部分。也许页面布局很复杂，你已经简化了这个讨论（顺便说一句，谢谢你）。如果是这种情况，那么您可以在头部创建两个子部分：tab-section和actions。然后你的jQuery可以改变动作并保持标签不变。

带标签的窗口标记

1 个答案: