Igorsrt,
вариант...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box {
display: none;
padding: 0px !important;
background-color: #FFF;
}
.box.visible {
display: block;
padding: 10px;
}
ul.tabs {
height: 27px;
background: #FFF;
border-bottom: 1px solid #777;
padding: 0 4px;
overflow: hidden;
list-style: none;
}
.tabs li.current, .tabs li:hover {
background-color:#52c8ff;
color:#FFFFFF;
border-color:#52c8ff;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
}
.tabs li {
float: left;
color: grey;
line-height: 27px;
margin-right: 1px !important;
padding: 0 7px 10px 8px !important;
font-weight: bold;
cursor: pointer;
}
.tabs li.current span {
color: #FFF;
}
.tabs li span {
float: left;
padding: 0 11px 0 0;
height: 27px;
color: #FFF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".section").each(function(indx, el) {
var li = $("li", el),
box = $(".box", el),
btn = $(".btn", el),
len = li.length - 1,
i = 0;
$(el).on("click", "li", function() {
i = li.index(this);
li.removeClass("current").eq(i).addClass("current");
box.removeClass("visible").eq(i).addClass("visible")
});
$(el).on("click", ".btn", function(event) {
event.preventDefault();
i += $(this).is(".prev") ? -1 : 1;
i < 0 && (i = len);
i > len && (i = 0);
li.eq(i).click()
})
})
});
</script>
</head>
<body>
<div class="section">
<ul class="tabs">
<li class="current">Вкладка 1</li>
<li>Вкладка 2</li>
<li>Вкладка 3</li>
</ul>
<div class="box visible">
содержимое вкладки 1
</div>
<div class="box">
содержимое вкладки 2
</div>
<div class="box">
содержимое вкладки 3
</div>
<div class="controls">
<a href="#" class="btn btn-default prev">< Prev</a>
<a href="#" class="btn btn-default next">Next ></a>
</div>
</div>
</body>
</html>
