Переключение между табами
Здравствуйте,
Есть такой код табов:
<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 не хотелось бы использовать. Плагин хороший, но не под такие задачи. Заранее спасибо |
<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="←" 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="→" 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>
|
а возможно кнопки вынести на сами табы, ваш пример отлично работает.
Но реализация кнопок - они сверху. Например:
<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="←" id="butt1" />
</div>
<div id="second">
<h2>Второй</h2>
<input type="button" value="→" id="butt2" />
<input type="button" value="←" id="butt1" />
</div>
<div id="third">
<h2>Третий</h2>
<input type="button" value="→" id="butt2" />
</div>
</div>
|
<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="→" class="next" />
</div>
<div id="second" style="display: none">
<h2>Второй</h2>
<input type="button" value="→" class="next" />
<input type="button" value="←" class="previous" />
</div>
<div id="third" style="display: none">
<h2>Третий</h2>
<input type="button" value="←" 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>
|
Спасибо, отличный пример!
|
может подскажете как еще сделать запоминание в куки?
|
| Часовой пояс GMT +3, время: 02:44. |