Баг с табами?

[CORONER]

На сайте установлены табы и внутри них ещё одни.
Не работают табы #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>

.back {
    width: 100%;
    height: 409px;
    background:none;
}
.abs {
    position: absolute;
    margin-top: 3%;
    width: 97%;
    height: 81%;
    margin-left: 0%;
}
.abs>p>span {margin-top:20%;position: absolute;}
.abs>a {padding: 2%;background: #333;color: white;float:left; margin-top: -3%;text-decoration: none;}
.abs>b>a {
    padding: 2%;
    background: url(img/bglinka.gif);
    background-repeat: repeat;
    color: white;
    float: left;
    text-decoration: none;
    margin-top: -3%;
    font-weight: normal;
}
.block {
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    position: absolute;
    display: none;
}
.tabs {
  background: #ededed;
  font-family: monostace;
  top: 58px;
  width: 520px;
  height: 270px;
}

.tabs p {
  top: 16px;
  font-family: monostace;
}

#one {
  display: block;
}

div:target {
  display: block;
}
div[id*=tab]:target {
  display: block;
}
div[id*=tab]:target ~ #tab {
  display: block;
}
div[id*=t]:target ~ #one {
  display: none;
}

http://demoldphoto.ucoz.net/

[Malleys]

<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

[CORONER]

Спасибо)

[CORONER]

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