Сразу, чтобы затравить душу, пример:

Пример

See the Pen Вкладки by Ванька (@itshaman) on CodePen.

Реализация

Реализовано все предельно просто. HTML-код выглядит так:

<ul class="tabs">
  <li><a href="#frame1">1</a></li>
  <li><a href="#frame2">2</a></li>
  <li><a href="#frame3">3</a></li>
  <li><a href="#frame4">4</a></li>
  <li><a href="#frame5">5</a></li>
</ul>
<div class="tabs-content">
  <section id="frame1">1</section>
  <section id="frame2">2</section>
  <section id="frame3">3</section>
  <section id="frame4">4</section>
  <section id="frame5">5</section>
</div>

CSS-код:

<style>
.tabs {
  font-size: 0.75em;
  line-height: 30px;
  list-style: none;
  overflow: hidden;
  height: 30px;
}
.tabs li {
  float: left;
}
.tabs a {
  float: left;
  background: #eee;
  padding: 0 15px;
  text-decoration: none;
  height: 30px;
}
.tabs a:hover {
  background: #ddd;
}
.tabs-content {
  width: 100%;
  height: 300px;
  overflow: hidden;
  text-align: center;
  line-height: 300px;
  font-size: 6em;
}
.tabs-content section {
  width: 960px;
  height: 300px;
}
.tabs-content #frame1   { background: red; }
.tabs-content #frame2   { background: blue; }
.tabs-content #frame3 { background: aqua; }
.tabs-content #frame4  { background: green; }
.tabs-content #frame5  { background: yellow; }
</style>

На мой взгляд, это очень крутое решение, которое позволит без особых проблем придать сайту некоторую динамичность не прибегая к дополнительному JS-коду. Возможно, такая реализация не подойдет для оформления главной навигации, но для использования в информационной части сайта такое решение подойдет как нельзя кстати.

Этот способ позволяет за минимальные затраты на производительность получить эффект динамики на сайта.

Просто и красиво!