Переключение между табами

[zakbc]

Здравствуйте,

Есть такой код табов:

<div class="tabs">
<!-- Это сами вкладки -->
    <ul class="tabNavigation">
        <li><a class="" href="#first">Первый</a></li>
        <li><a class="" href="#second">Второй</a></li>
        <li><a class="" href="#third">Третий</a></li>
    </ul>
<!-- Это контейнеры содержимого -->    
    <div id="first">
        <h2>Первый</h2>
    </div>
    <div id="second">
        <h2>Второй</h2>
    </div>
    <div id="third">
        <h2>Третий</h2>
    </div>
</div>

Скрипт:

$(function () {
    var tabContainers = $('div.tabs > div'); 
    tabContainers.hide().filter(':first').show(); 
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide(); 
        tabContainers.filter(this.hash).show(); 
        $('div.tabs ul.tabNavigation a').removeClass('selected'); 
        $(this).addClass('selected'); 
        return false;
    }).filter(':first').click();
});

div.tabs {
background: #333;
padding: 1em;
}

div.container { 
margin: auto; 
width: 90%; 
margin-bottom: 10px;
}

ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}

ul.tabNavigation li {
display: inline;
}

ul.tabNavigation li a {
padding: 3px 9px;
background-color: #666;
color: #000;
text-decoration: none;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
background: #FFF;
color: #000;
}

ul.tabNavigation li a:hover {
background: #ccc;
color: #000;
}

ul.tabNavigation li a:focus {
outline: 0;
}

div.tabs div {
padding: 5px;
margin-top: 3px;
border: 1px solid #FFF;
background: #FFF;
}

div.tabs div h2 {
margin-top: 0;
}

Хочу добавить кнопки "Далее" и "Назад",
Пробовал как вариант:

<input type="button" value="Далее" id="butt1"  />
<input type="button" value="Далее" id="butt2"  />

Скрипт:

$(document).ready(function () {
    $("#butt1").click(function () {
        $('#first').hide();
        $('#second').show();
    });
    $("#butt2").click(function () {
        $('#first').hide();
        $('#second').show();
    });
});​

Но табы вообще перестали работать.
Как можно добавить данные кнопки?
Плагин jcarousel не хотелось бы использовать. Плагин хороший, но не под такие задачи.

Заранее спасибо

[bes]

<style>
div.tabs {
background: #333;
padding: 1em;
}

div.container { 
margin: auto; 
width: 90%; 
margin-bottom: 10px;
}

ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}

ul.tabNavigation li {
display: inline;
}

ul.tabNavigation li a {
padding: 3px 9px;
background-color: #666;
color: #000;
text-decoration: none;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
background: #FFF;
color: #000;
}

ul.tabNavigation li a:hover {
background: #ccc;
color: #000;
}

ul.tabNavigation li a:focus {
outline: 0;
}

div.tabs div {
padding: 5px;
margin-top: 3px;
border: 1px solid #FFF;
background: #FFF;
}

div.tabs div h2 {
margin-top: 0;
}
</style>

<div class="tabs">
<!-- Это сами вкладки -->
	<ul class="tabNavigation" id="list">
		<li><input type="button" value="&#8592" id="butt1"  />
		<li><a class="" href="#first">Первый</a></li>
		<li><a class="" href="#second">Второй</a></li>
		<li><a class="" href="#third">Третий</a></li>
		<li><input type="button" value="&#8594" id="butt2"  />
	</ul>
	
<!-- Это контейнеры содержимого -->    
<div id="div">
    <div id="first">
        <h2>Первый</h2>
    </div>
    <div id="second" style="display: none">
        <h2>Второй</h2>
    </div>
    <div id="third" style="display: none">
        <h2>Третий</h2>
    </div>

</div>

<script>
window.onload = function () {
	var list = document.getElementById('list');
	var cur = document.getElementById('div').children[0];
	
	function sh(cur, next) {
		cur.style.display = 'none';
		next.style.display = 'block';
	}
	
	list.onclick = function (e) {
		e = e || event;
		var target = e.target || e.srcElement;
		var n = this.children.length;
		var elem;
		if (target == this.children[0].children[0]) {
			if (cur.previousSibling.previousSibling) {//previousElementSibling
				elem = cur.previousSibling.previousSibling;
				sh(cur, elem);
				cur = elem;
			}
		} else 
		if (target == this.children[n-1].children[0]) {
			if (cur.nextSibling.nextSibling) {//nextElementSibling
				elem = cur.nextSibling.nextSibling;
				sh(cur, elem);
				cur = elem;
			}
		} else 
		if (target.parentNode.parentNode == this) {
			elem = document.getElementById(target.getAttribute('href').replace('#', ''));
			sh(cur, elem);
			cur = elem;
		}
	}
	

}
</script>

[zakbc]

а возможно кнопки вынести на сами табы, ваш пример отлично работает.
Но реализация кнопок - они сверху.
Например:

<div class="tabs">
<!-- Это сами вкладки -->
    <ul class="tabNavigation">
        <li><a class="" href="#first">Первый</a></li>
        <li><a class="" href="#second">Второй</a></li>
        <li><a class="" href="#third">Третий</a></li>
    </ul>
<!-- Это контейнеры содержимого -->    
    <div id="first">
        <h2>Первый</h2>
            <input type="button" value="&#8592" id="butt1"  />
    </div>
    <div id="second">
        <h2>Второй</h2>
            <input type="button" value="&#8594" id="butt2"  />
            <input type="button" value="&#8592" id="butt1"  />
    </div>
    <div id="third">
        <h2>Третий</h2>
            <input type="button" value="&#8594" id="butt2"  />
    </div>
</div>

[bes]

<style>
div.tabs {
background: #333;
padding: 1em;
}

div.container { 
margin: auto; 
width: 90%; 
margin-bottom: 10px;
}

ul.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}

ul.tabNavigation li {
display: inline;
}

ul.tabNavigation li a {
padding: 3px 9px;
background-color: #666;
color: #000;
text-decoration: none;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover {
background: #FFF;
color: #000;
}

ul.tabNavigation li a:hover {
background: #ccc;
color: #000;
}

ul.tabNavigation li a:focus {
outline: 0;
}

div.tabs div {
padding: 5px;
margin-top: 3px;
border: 1px solid #FFF;
background: #FFF;
}

div.tabs div h2 {
margin-top: 0;
}
</style>

<div class="tabs">
<!-- Это сами вкладки -->
    <ul class="tabNavigation" id="list">
        <li><a class="" href="#first">Первый</a></li>
        <li><a class="" href="#second">Второй</a></li>
        <li><a class="" href="#third">Третий</a></li>
    </ul>
<!-- Это контейнеры содержимого -->   
<div id="div" >
    <div id="first">
        <h2>Первый</h2>
            <input type="button" value="&#8594" class="next"  />
    </div>
    <div id="second" style="display: none">
        <h2>Второй</h2>
            <input type="button" value="&#8594" class="next"  />
            <input type="button" value="&#8592" class="previous"  />
    </div>
    <div id="third"  style="display: none">
        <h2>Третий</h2>
            <input type="button" value="&#8592" class="previous"  />
    </div>
</div>
</div>

<script>
window.onload = function () {
	var list = document.getElementById('list');
	var cur = document.getElementById('div').children[0];
	
	function sh(cur, next) {
		cur.style.display = 'none';
		next.style.display = 'block';
	}
	
	document.body.onclick = function (e) {
		e = e || event;
		var target = e.target || e.srcElement;
		var elem;
		if (target.className == 'previous') {
			if (target.parentNode.previousSibling.previousSibling) {//previousElementSibling
				elem = target.parentNode.previousSibling.previousSibling;
				sh(cur, elem);
				cur = elem;
			}
		} else 
		if (target.className == 'next') {
			if (cur.nextSibling.nextSibling) {//nextElementSibling
				elem = cur.nextSibling.nextSibling;
				sh(cur, elem);
				cur = elem;
			}
		} else 
		if (target.parentNode.parentNode.id == 'list') {
			elem = document.getElementById(target.getAttribute('href').replace('#', ''));
			sh(cur, elem);
			cur = elem;
		}
	}
	

}
</script>

[zakbc]

Спасибо, отличный пример!

[Жекаизжека]

может подскажете как еще сделать запоминание в куки?