пример таба css+javascript - JavaScript, Ajax

slips · 26.11.2009, 15:11

Добрый день, хочу поделиться сделаные мною табы(вкладки). Может кому и пригодится.

тестировал в Ie 6.0/Opera/Mozila FireFox

рисунок фона
tab-round.png

и сам код :

Код HTML:

<html>
<head>
  <title>Пример табов</title>

<style type="text/css">
ul, li {border:0; margin:0; padding:0; list-style:none;}
ul{
    padding-left:5px;
}
li{
    float:left;
    margin-top:2px;
    margin-button:0px;
    margin-left:-1px;
}
.tab a:link, .tab a:visited{
    display:block;
    float:left;
    background:url(tab-round.png) no-repeat right -30px;
    color:#666;
    text-decoration:none;
    padding-right:10px;
    font-size: 11px;
    line-height: 2.3em;
}
.tab a span{
    display:block;
    float:left;
    background:url(tab-round.png) no-repeat left -30px;
    padding-left:10px;
    cursor:pointer;
    font-size: 11px;
}
.tab a:hover{
    background:url(tab-round.png) no-repeat right 0px;
    color:#000;
}
.active a:hover{
    background:url(tab-round.png) no-repeat right 0px;
}
.tab a:hover span{
    background:url(tab-round.png) no-repeat left 0px;
}
.active a:link, .active a:visited, .active a:visited, .active a:hover{
    background:url(tab-round.png) no-repeat right -60px;
    color:#FFF;
}
.active a span, .active a:hover span{
    background:url(tab-round.png) no-repeat left -60px;
}
}
</style>

<script language="Javascript" type="text/javascript">
<!--
  function RequestData(url,idElement)
{
  var curTab=idElement.parentNode;   // ссылаемся на li
  var ulTab=curTab.parentNode;       // ссылаемся на ul
  for (var i=0; i<ulTab.childNodes.length; i++)
    ulTab.childNodes[i].className = (ulTab.childNodes[i].className == "active") ? ''
      : ulTab.childNodes[i].className;
   curTab.className += 'active';
}
//-->
</script>
</head>

<body>
<ul id="Ptabs" class="tab">
  <li id="tabs0" class="active">
    <a href="home.html" onclick="RequestData('',this);return false"><span>Tab0</span></a>
  </li>
  <li id="tabs1">
    <a href="community.html" onclick="RequestData('',this);return false"><span>Tab2</span></a>
  </li>
</ul>
</body>
</html>

Буду рад замечаниям и предложениям.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Требуется PHP,CSS,JavaScript программист	Антон Радеонов	Фриланс	1	15.06.2008 13:15