Q:

Создание динамических закладок на CSS3 в стиле браузера Google chrome

у меня есть две сверстаные заготовки, в каждой из них есть то что нужно для готового результата.

1- это первая заготовка 2- вторая
  заготовка 3- желаемый результат если
  он программно возможен

Не получается создать панель закладок в стиле гугл хром, у меня есть первая заготовка которую я хочу внедрить на вторую но покуда что котелок не варит как это все можно реализовать. 
Проблема в том что первая заготовка загружается с картинок а вторая полностью на css3 
в первой заготовки активность a:active первой и последней вкладки отмечены id="firstcurrent" id="lastcurrent" все остальные id="current" во второй же заготовке таких заморочек нету все гораздо проще и вот как их скрестить между собой и так что бы еще остались плавные переходы с вкладки на вкладку во второй заготовке хз...
Ребят может кто подскажет у кого мозги по сильнее?
<!DOCTYPE html>
<html>
<head>  

  <meta charset="utf-8">

  <style type="text/css" >

  /* ------НАЧАЛО---------ПЕРВАЯ ЗАГОТОВКА---------------- */

a { color: #0000cc; text-decoration: none; }

blockquote {
background: url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/quote.gif) no-repeat; 
margin:1em; 
padding: 0 0 0 3em;
}

input, textarea {
border: 1px solid #d1d1d1;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -19px 0;
}

/* Header Menu */
.headermenu {
height: 25px;
}

.headermenu ul{
list-style-type: none;
margin: 0;
margin-top: 1px;
}

.headermenu ul li{
float: left;
margin: 0;
background: url(http://1hd.com.ua/gh/navtab00.gif) no-repeat right top;
}

.headermenu ul li a{
display: block;
padding: 5px 48px 5px 10px;
font-weight: bold;
text-decoration: none;
color: #333;
font-size: .9em;
font-weight:normal;
}
/*белый текст НАВЕДЕННОЙ МЫШКОЙ*/
.headermenu ul li a:hover{
color: #f9f7ed;
}

.headermenu ul li.first a{
padding: 5px 48px 5px 39px;
background: url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/navtab_first.gif) no-repeat;
}

.headermenu ul li#firstcurrent{
background: #f4f8fd url(http://1hd.com.ua/gh/navtab_c.gif) no-repeat right top;
}

.headermenu ul li#firstcurrent a{
background: url(http://1hd.com.ua/gh/navtab_d.gif) no-repeat;
color: #000;
}

.headermenu ul li#current{
margin-left: -38px;
background: #f4f8fd url(http://1hd.com.ua/gh/navtab_c.gif) no-repeat right top;
}

/*ЧЕРНЫЙ текст ЦЕНТРАЛ ВКЛАД*/
.headermenu ul li#current a{
padding: 5px 48px;
background: url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/navtab_current_left.gif) no-repeat;
color: #000;
}

.headermenu ul li.last{
background: url(http://1hd.com.ua/gh/navtab_l.gif) no-repeat right top;
}

.headermenu ul li.last a{
padding: 5px 39px 5px 10px;
}

.headermenu ul li#lastcurrent{
margin-left: -38px;
background: #f4f8fd url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/navtab_current_last.gif) no-repeat right top;
}

.headermenu ul li#lastcurrent a{
padding: 5px 39px 5px 48px;
background: url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/navtab_current_left.gif) no-repeat;
color: #000;
}
/* End Header Menu */

  /* ------КОНЕЦ---------ПЕРВАЯ ЗАГОТОВКА---------------- */

  /* -----НАЧАЛО------ВТОРАЯ ЗАГОТОВКА---------------- */
    body {
      width: 700px;
      margin: 100px auto 0 auto;
      font-family: Arial, Helvetica;
      font-size: small;
      background-color: #4e4e4e;

    }

    #tabs {
      overflow: hidden;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none; 
    }

    #tabs li {
      float: left;
      margin: 0 -15px 0 0; 
    }

    #tabs a { 
      float: left;
      position: relative;
      padding: 0 40px;
      height: 0; 
      line-height: 30px;
      text-transform: uppercase;
      text-decoration: none;
      color: #4e4e4e;
      border-right: 15px solid transparent;
      border-left: 11px solid transparent;
      border-bottom: 2px;

      border-bottom: 25px solid #A0C5F1;
            opacity: .3;
      filter: alpha(opacity=15);      

    }

    #tabs a:hover,

        /* -----------------при наведенной мышке------------- */
    #tabs a:focus {
      color: #000;

    }

    #tabs a:focus { 
       border-bottom-color: #CC0001;
      opacity: 1;
      filter: alpha(opacity=100);
    }

    #tabs #current {  
      z-index: 3;
      border-bottom-color: #008a77;
      opacity: 1;
      filter: alpha(opacity=100);    

    }

    /* ----------- */
    #content { 
        background: #fff;
        border-top: 2px solid #008a77; 
        padding: 2em;
        /*height: 220px;*/ 
    }

    #content h2,
    #content h3,
    #content p {
        margin: 0 0 15px 0;
    }  

    /* Только для демонстрационной страницы */
    #about { 
        color: #999;
        text-align: center;
        font: 0.9em Arial, Helvetica;
    }

    #about a {
        color: #777;
    }   

   /* ----КОНЕЦ------ВТОРАЯ ЗАГОТОВКА---------------- */ 

  </style>
</head>

<body>

НАЧАЛО ПЕРВАЯ ЗАГОТОВКА

    <div class="headermenu span-24">
        <ul>
       <li class="first" id="firstcurrent"><a href="#" title="Home">Один</a></li>

                    <li *id="current"*>
            <a href="#"> ДВА</a></li>

                    <li>
            <a href="#">ТРИ</a></li>

                    <li class="last" *id="lastcurrent"*>
            <a href="#">ЧЕТЫРЕ</a></li>

                </ul>
    </div>

<BR><BR><BR>

ВТОРАЯ ЗАГОТОВКА

<div class="headermenu span-24">
  <ul id="tabs">
      <li><a href="#" name="#tab1">Один</a></li>
      <li><a href="#" name="#tab2">Два</a></li>
      <li><a href="#" name="#tab3">Три</a></li>
      <li><a href="#" name="#tab4">Четыре</a></li>    
  </ul>
 </div>

  <div id="content">
      <div id="tab1">
          <h2>Lorem ipsum sit amet</h2>
          <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
          <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.</p>

          <h3>Pellentesque habitant</h3>
          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>    
      </div>
      <div id="tab2">
          <h2>Vivamus fringilla suscipit justo</h2>
          <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>

          <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>    
      </div>
      <div id="tab3">
          <h2>Phasellus non nibh</h2>
          <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
          <h3>Duis pulvinar nibh vel urna</h3>
          <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet. </p>

          <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
      </div>
      <div id="tab4">
          <h2>Cum sociis natoque penatibus</h2>
          <p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.</p>
          <p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
          <h3>Imperdiet sem interdum nec</h3>

          <p>Mauris rhoncus tincidunt libero quis fringilla.</p>    
      </div>
  </div>

  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

  <script type="text/javascript">
    function resetTabs(){
        $("#content div").hide(); //Скрываем содержание
        $("#tabs a").attr("id",""); //Сбрасываем id      
    }

    var myUrl = window.location.href; //Получаем URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // Для localhost/tabs.html#tab2 myUrlTab = #tab2     
    var myUrlTabName = myUrlTab.substring(0,4); // Для выше привденного примера myUrlTabName = #tab

    (function(){
        $("#content div").hide(); // Скрываем все содержание при инициализации
        $("#tabs li:first a").attr("id","current"); // Активируем первую закладку
        $("#content div:first").fadeIn(); // Показываем содержание первой закладки

        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //Определение текущейй закладки
             return       
            }
            else{             
            resetTabs();
            $(this).attr("id","current"); // Активируем текущую закладку
            $($(this).attr('name')).fadeIn(); // Показываем содержание текущей закладки
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Активируем закладку по url
              $(myUrlTab).fadeIn(); // Показываем содержание закладки
          }
        }
    })()
  </script>

</body>
</html>

ВОТ МОИ ПОПЫТКИ, ТО ЧТО Я СМОГ СДЕЛАТЬ НО ОНО СЫРОВАТОЕ КАК ДАЛЬШЕ ДЕЛАТЬ НЕ ЗНАЮ МОЖЕТ ДРУГОЙ ПУТЬ ВЫБРАТЬ
<!DOCTYPE html>
<html>
<head>  
  <meta charset="utf-8">

  <style type="text/css" >

  /* ------НАЧАЛО---------ПЕРВАЯ ЗАГОТОВКА---------------- */

a { color: #0000cc; text-decoration: none; }

blockquote {
background: url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/quote.gif) no-repeat; 
margin:1em; 
padding: 0 0 0 3em;
}

input, textarea {
border: 1px solid #d1d1d1;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -19px 0;
}

/* Header Menu */
.headermenu {
height: 25px;
}

.headermenu ul{
list-style-type: none;
margin: 0;
margin-top: 1px;
}

.headermenu ul li{
float: left;
margin: 0;
background: url(http://1hd.com.ua/gh/navtab00.gif) no-repeat right top;
}

.headermenu ul li a{
display: block;
padding: 5px 48px 5px 10px;
font-weight: bold;
text-decoration: none;
color: #333;
font-size: .9em;
font-weight:normal;
}
/*белый текст НАВЕДЕННОЙ МЫШКОЙ*/
.headermenu ul li a:hover{
color: #f9f7ed;
}

.headermenu ul li.first a{
padding: 5px 48px 5px 39px;
background: url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/navtab_first.gif) no-repeat;
}

.headermenu ul li#firstcurrent{
background: #f4f8fd url(http://1hd.com.ua/gh/navtab_c.gif) no-repeat right top;
}

.headermenu ul li#firstcurrent a{
background: url(http://1hd.com.ua/gh/navtab_d.gif) no-repeat;
color: #000;
}

.headermenu ul li#current{
margin-left: -38px;
background: #f4f8fd url(http://1hd.com.ua/gh/navtab_c.gif) no-repeat right top;
}

/*ЧЕРНЫЙ текст ЦЕНТРАЛ ВКЛАД*/
.headermenu ul li#current a{
padding: 5px 48px;
background: url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/navtab_current_left.gif) no-repeat;
color: #000;
}

.headermenu ul li.last{
background: url(http://1hd.com.ua/gh/navtab_l.gif) no-repeat right top;
}

.headermenu ul li.last a{
padding: 5px 39px 5px 10px;
}

.headermenu ul li#lastcurrent{
margin-left: -38px;
background: #f4f8fd url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/navtab_current_last.gif) no-repeat right top;
}

.headermenu ul li#lastcurrent a{
padding: 5px 39px 5px 48px;
background: url(http://my-chrome.ru/wp-content/themes/googlechrome%20eng/images/navtab_current_left.gif) no-repeat;
color: #000;
}
/* End Header Menu */

  /* ------КОНЕЦ---------ПЕРВАЯ ЗАГОТОВКА---------------- */

  /* -----НАЧАЛО------ВТОРАЯ ЗАГОТОВКА---------------- */
    body {
      width: 700px;
      margin: 100px auto 0 auto;
      font-family: Arial, Helvetica;
      font-size: small;
      background-color: #4e4e4e;

    }

    #tabs {

    }

     li {
      float: left;
      margin: 0 -15px 0 0; 
    }

    #tabs a { 
      float: left;
      position: relative;
      padding: 0 40px;
      height: 0; 
      line-height: 30px;
      text-transform: uppercase;
      text-decoration: none;
      color: #4e4e4e;
      border-right: 15px solid transparent;
      border-left: 11px solid transparent;
      border-bottom: 2px;

      border-bottom: 25px solid #A0C5F1;
            opacity: .3;
      filter: alpha(opacity=15);      

    }

        /* -----------------при наведенной мышке------------- */
     a:focus {
      color: #000;

    }

     a:focus { 
       border-bottom-color: #CC0001;
      opacity: 1;
      filter: alpha(opacity=100);
    }

     #current {  
      z-index: 3;
      border-bottom-color: #95B6E0;
      opacity: 1;
      filter: alpha(opacity=100);    

    }

    /* ----------- */
    #content { 
        background: #fff;
        border-top: 2px solid #95B6E0; 
        padding: 2em;
        /*height: 220px;*/ 
    }

    #content h2,
    #content h3,
    #content p {
        margin: 0 0 15px 0;
    }  

    /* Только для демонстрационной страницы */
    #about { 
        color: #999;
        text-align: center;
        font: 0.9em Arial, Helvetica;
    }

    #about a {
        color: #777;
    }   

   /* ----КОНЕЦ------ВТОРАЯ ЗАГОТОВКА---------------- */ 

  </style>
</head>

<body>

НАЧАЛО ПЕРВАЯ ЗАГОТОВКА

    <div class="headermenu span-24">
        <ul id="tabs">
       <li class="first" id="firstcurrent"><a href="#" name="#tab1">Один</a></li>

                    <li *id="current"*>
            <a href="#" name="#tab2"> ДВА</a></li>

                    <li>
            <a href="#"name="#tab3">ТРИ</a></li>

                    <li class="last" *id="lastcurrent"*>
            <a href="#"name="#tab4">ЧЕТЫРЕ</a></li>

                </ul>
    </div>

  <div id="content">
      <div id="tab1">
          <h2>Lorem ipsum sit amet</h2>
          <p>Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.</p>
          <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.</p>

          <h3>Pellentesque habitant</h3>
          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>    
      </div>
      <div id="tab2">
          <h2>Vivamus fringilla suscipit justo</h2>
          <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>

          <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>    
      </div>
      <div id="tab3">
          <h2>Phasellus non nibh</h2>
          <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
          <h3>Duis pulvinar nibh vel urna</h3>
          <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet. </p>

          <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
      </div>
      <div id="tab4">
          <h2>Cum sociis natoque penatibus</h2>
          <p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.</p>
          <p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
          <h3>Imperdiet sem interdum nec</h3>

          <p>Mauris rhoncus tincidunt libero quis fringilla.</p>    
      </div>
  </div>

  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

  <script type="text/javascript">
    function resetTabs(){
        $("#content div").hide(); //Скрываем содержание
        $("#tabs a").attr("id",""); //Сбрасываем id      
    }

    var myUrl = window.location.href; //Получаем URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // Для localhost/tabs.html#tab2 myUrlTab = #tab2     
    var myUrlTabName = myUrlTab.substring(0,4); // Для выше привденного примера myUrlTabName = #tab

    (function(){
        $("#content div").hide(); // Скрываем все содержание при инициализации
        $("#tabs li:first a").attr("id","current"); // Активируем первую закладку
        $("#content div:first").fadeIn(); // Показываем содержание первой закладки

        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //Определение текущейй закладки
             return       
            }
            else{             
            resetTabs();
            $(this).attr("id","current"); // Активируем текущую закладку
            $($(this).attr('name')).fadeIn(); // Показываем содержание текущей закладки
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Активируем закладку по url
              $(myUrlTab).fadeIn(); // Показываем содержание закладки
          }
        }
    })()
  </script>

</body>
</html>

A:

По поводу первой заготовки. Замените id на классы. Т.е. должны получиться правила для:
.headermenu ul li.first {...}
.headermenu ul li.first a {...}
.headermenu ul li.first.current {...}
.headermenu ul li.first.current a {...}
/* и т.д. для середины и конца */

затем можно поменять будет классы .first на :first-child и .last на :last-child, тогда в разметке не нужно будет классы проставлять вообще.
Скрипт остается примерно тот же, просто после этого вам будет достаточно всего лишь ставить класс current для соответствующего <li> и убирать в случае ненадобности. addClass, removeClass. id лучше не трогать, тут их использование не по назначению.

