dezytube,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.current{
background-color: hsla(25, 75%, 47%, 1);
}
.tabs_item:nth-child(n+2){
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var index = 0,
li = $(".tabs li"),
tab = $(".tabs_item"),
len = li.length;
function setIndex(x, add) {
return function(event) {
event.preventDefault();
index = add ? index + x : x;
index = limit(index);
show()
}
}
function limit(num) {
if (num >= len) num = 0;
if (num < 0) num = len - 1;
return num
}
function show() {
li.not(li.eq(index).addClass("current")).removeClass("current");
tab.stop().not(tab.eq(index).slideDown()).slideUp()
}
li.each(function(indx, el) {
$(el).on("click", setIndex(indx));
var button = $("button", tab[indx]);
button.first().on("click", setIndex(-1, true));
button.last().on("click", setIndex(1, true))
})
});
</script>
</head>
<body>
<div class="tab">
<ul class="tabs">
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul> <!-- / tabs -->
<div class="tab_content">
<div class="tabs_item">
<button>Назад</button>
<p>Контент1</p>
<button>Вперед</button>
</div>
<div class="tabs_item">
<button>Назад</button>
<p>Контент2</p>
<button>Вперед</button>
</div>
<div class="tabs_item">
<button>Назад</button>
<p>Контент3</p>
<button>Вперед</button>
</div>
</div>
</div>
</body>
</html>
