Баг с табами?
 

На сайте установлены табы и внутри них ещё одни.
Не работают табы #four-#seven во вкладке Gallery.
Точнее работают, но неверно, первые 3 кладки нормально переключаются, как только переключаемся на 4-ую появляется 1-ая, а поверх нее 4-ая.
Как это исправить, не пойму(

<div class="back">
           
         <div id="seven" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <a href="#tree">PEOPLE</a>
     <a href="#four">LANDSCAPE</a>
       <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
     <b>  <a href="#seven">REAL STATE</a></b>
           
    <p class="abs">
 <span>7</span>
    </p>
  </div>   
         
         
                   <div id="six" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <a href="#tree">PEOPLE</a>
     <a href="#four">LANDSCAPE</a>
       <a href="#five">ANIMAL</a>
       <b> <a href="#six">MACRO</a></b>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
 <span>6</span>
    </p>
  </div>     
         
              <div id="five" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <a href="#tree">PEOPLE</a>
     <a href="#four">LANDSCAPE</a>
       <b>  <a href="#five">ANIMAL</a></b>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
 <span>5</span>
    </p>
  </div>    
         
       <div id="four" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <a href="#tree">PEOPLE</a>
      <a href="#four">LANDSCAPE</a>
      <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
 <span>4</span>
    </p>
  </div>     
         
         
   <div id="tree" class="abs block">
<a href="#one">NEW</a>
<a href="#two">CITY</a>
         <b>  <a href="#tree">PEOPLE</a></b>
      <a href="#four">LANDSCAPE</a>
      <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
 <span>3</span>
    </p>
  </div>
  

  <div id="two" class="abs block">
<a href="#one">NEW</a>
  <b>  <a href="#two">CITY</a></b>
    <a href="#tree">PEOPLE</a>
      <a href="#four">LANDSCAPE</a>
      <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    
    <p class="abs">
  <span>
               
      2
      
        </span>
    </p>
  </div>

  <div id="one" class="abs block">
    <b><a href="#one">NEW</a></b>
    <a href="#two">CITY</a>
    <a href="#tree">PEOPLE</a>
      <a href="#four">LANDSCAPE</a>
      <a href="#five">ANIMAL</a>
      <a href="#six">MACRO</a>
      <a href="#seven">REAL STATE</a>
    <p class="abs">
    <span>
 2
        </span>
    </p>
  </div>

http://demoldphoto.ucoz.net/

<div class="bar">
	<a href="#one">NEW</a>
	<a href="#two">CITY</a>
	<a href="#three">PEOPLE</a>
	<a href="#four">LANDSCAPE</a>
	<a href="#five">ANIMAL</a>
	<a href="#six">MACRO</a>
	<a href="#seven">REAL STATE</a>
</div>
<div class="tabs">
	<div id="two">2</div>
	<div id="three">3</div>
	<div id="four">4</div>
	<div id="five">5</div>
	<div id="six">6</div>
	<div id="seven">7</div>
	<div id="one">1</div>
</div>
<style>

	.tabs > [id],
	.tabs > [id]:target ~ [id] {
		display: none;
	}

	.tabs > [id]:target,
	.tabs > [id]:last-child {
		display: block;
	}

</style>

Всё-таки работающий пример реализации вкладок при помощи псевдо-класса :target

Спасибо)

Не могу теперь сделать активную ссылку
Ранее делал через <b>, теперь через псевдоклассы не выходит.
Точнее выходит, но пока есть нажатие на ссылку. А нужно, чтобы оставалось, пока не нажмешь на другой элемент секции bar