Javascript-форум - Переключение табов стрелками

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>