PDA

Просмотр полной версии : js страница из нескольких вкладок

ultimatum
06.06.2007, 12:35
В одной из книг нашел код как зделать страницу состоящую из нескольких вкладок , но данный код почемуто не работет у меня и немогу понять где ошибка.Прозьба указать меня на ошибку
<html>
<head>
<script type="text/javascript">
//обьявление функции которая выполняет переключение между вкладками
function showTab(pTabIndex)
{
var i=0;
for (i=0 ; i<tabs.length ; i++)
{
//делаем нужный контент-вкладку видимой.
//стальное - невидимами
tabs[i].style.display = (i == pTabIndex) ? "block" : "none";
//выделяем гиперссылку-корешок, соответствующую видимой вкладке,серым фоном , остальные - белым
tabs[i].style.backgroundColor = (i == pTabIndex) ? "#cccccc" : "#ffffff";
}
{
</script>
<!-- создаём стилевые классы для контейнеров ,содержащего гиперссылки-корешки вкладок , и для контейнера б содержащего сами вкладки -->
<style>
.tabhost
{
border: thin solid #cccccc;
padding:5px;
}
.tabhs A
{
border: thin solid #cccccc;
padding: 5px 5px 0px 5px ;
}
</style>
</head>
<body>
<div class="tabhs">
<A id="tabH1" href="#" ONCLICK="showTab(0);">вкладка 1 </A>&nbsp;
<A id="tabH2" href="#" ONCLICK="showTab(1);">вкладка 2 </A>&nbsp;
<A id="tabH3" href="#" ONCLICK="showTab(2);">вкладка 3 </A>
</div>
<div class="tabhost">
<div id="tab1"><p>это содержимое первой вкладкиp</p>
</div>
<div id="tab2"><p>это содержимое второй вкладкиp</p>
</div>
<div id="tab3"><p>это содержимое третей вкладки </p>
<p>это содержимое </p>
<p>это содержимое </p>
<p>это содержимое </p>
</div>
</div>
<SCRIPT TYPE="text/javascript">
var tabs = new Array();
tabs[0] = document.all["tab1"];
tabs[1] = document.all["tab2"];
tabs[2] = document.all["tab3"];
var tabHs = new Array();
tabHs[0] = document.all["tabH1"];
tabHs[1] = document.all["tabH2"];
tabHs[2] = document.all["tabH3"];
//делаем изначально видимую первую вкладку
showTab(0);
</SCRIPT>
</body>
</html>

-----------------------
je0n
06.06.2007, 12:50
одна закрывающая фигурная скобка не в ту сторону повернуту :)

<html>
<head>
<script type="text/javascript">
//обьявление функции которая выполняет переключение между вкладками
function showTab(pTabIndex)
{
var i=0; for (i=0 ; i<tabs.length ; i++)
{
//делаем нужный контент-вкладку видимой.
//стальное - невидимами
tabs[i].style.display = (i == pTabIndex) ? "block" : "none";
//выделяем гиперссылку-корешок, соответствующую видимой вкладке,серым фоном , остальные - белым
tabs[i].style.backgroundColor = (i == pTabIndex) ? "#cccccc" : "#ffffff";
}
}
</script>
<!-- создаём стилевые классы для контейнеров ,содержащего гиперссылки-корешки вкладок , и для контейнера б содержащего сами вкладки -->
<style>
.tabhost { border: thin solid #cccccc; padding:5px; }
.tabhs A { border: thin solid #cccccc; padding: 5px 5px 0px 5px ; }
</style>
</head>
<body>
<div class="tabhs">
<A id="tabH1" href="#" ONCLICK="showTab(0);">вкладка 1 </A>&nbsp;
<A id="tabH2" href="#" ONCLICK="showTab(1);">вкладка 2 </A>&nbsp;
<A id="tabH3" href="#" ONCLICK="showTab(2);">вкладка 3 </A>
</div> <div class="tabhost">
<div id="tab1"><p>это содержимое первой вкладкиp</p> </div>
<div id="tab2"><p>это содержимое второй вкладкиp</p> </div>
<div id="tab3"><p>это содержимое третей вкладки </p> <p>это содержимое </p> <p>это содержимое </p> <p>это содержимое </p> </div>
</div>
<SCRIPT TYPE="text/javascript">
var tabs = new Array();
tabs[0] = document.all["tab1"];
tabs[1] = document.all["tab2"];
tabs[2] = document.all["tab3"];
var tabHs = new Array();
tabHs[0] = document.all["tabH1"];
tabHs[1] = document.all["tabH2"];
tabHs[2] = document.all["tabH3"];
//делаем изначально видимую первую вкладку
showTab(0);
</SCRIPT>
</body>
</html>
ultimatum
06.06.2007, 13:02
спасибо точно

+
это ещё раз говорит о том что ночью кодить вредно )))) хотя никто не мешает))
GreenBear
06.06.2007, 13:06
это ещё раз говорит о том что ночью кодить вредно
это говорит, что надо юзать дебагеры.