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

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

If you want to change the head, why the tabs in head shouldn't change? According with your when clicked should change the body, foot and head. The tabs UL in the head should not change, can't change the head, so only change the body and foot? — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Nov 11, 2015 at 14:24

Lee Jenkins · Accepted Answer · 2015-11-11 14:48:48Z

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.

Collectives™ on Stack Overflow

Window markup with tabs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related