Window markup with tabs

Question

I have an HTML DIV with 3 sections: head, body and foot.

I added 2 tabs which when clicked should change the body, foot and head. The tabs UL in the head should not change. So I think my markup is not ideal:

.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>

NOTE: I still want actions on right of tabs ...

1. What do you suggest for the markup?
2. I will use JQuery to switch between sections.

Answer 1

It sounds like you need four sections. If you don't want the tabs to change, then put them in a different section. Then your jQuery code can change the head and the tabs will be unaffected.

<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>

Alternately, let's say for some reason you really only want three sections. Maybe the page layout is complicated and you've simplified it for this discussion (thanks for that, by the way). If that's the case, then you can create two sub-sections within the head: tab-section and actions. Then your jQuery can change the actions and leave the tabs unchanged.