javascript - How to add/remove class using bullets and arrows -

i having trouble figuring out how add , remove class div when user clicks either on corresponding number or prev/next arrows.

notice 'active' class on second item second nav. class removed , added first item , nav when user clicks "1" or "previous" arrow.

.wrap {    display: block;    width: 200px;    margin: 50px auto;    text-align: center;  }    .nav {    margin-bottom: 10px;  }  .nav {    padding: 5px;  }  .nav a:hover {    font-weight: 900;    cursor: pointer;  }  .nav a.active {    border-bottom: 1px solid black;    font-weight: 900;  }    .prev, .next {    display: inline-block;    padding: 5px;  }  .prev:hover, .next:hover {    font-weight: 900;    cursor: pointer;  }    .items div {    display: none;    padding: 25px;  }  .items .one {    background: red;  }  .items .two {    background: green;  }  .items .three {    background: blue;  }  .items .active {    display: inline-block;  }

<div class="wrap">    <div class="nav">      <a class="one">1</a>      <a class="two active">2</a>      <a class="three">3 </a>    </div>    <div class="items">      <span class="prev"><</span>      <div class="one">one</div>      <div class="two active">two</div>      <div class="three">three</div>      <span class="next">></span>    </div>  </div>

http://codepen.io/bbbenji/pen/wovjem

you can try somethinglike this:

$('.next, .prev').on('click', function() {    var $cur = $(this).closest('.wrap').find('.items div.active');    var $nav = $(this).closest('.wrap').find(' .nav a.active')      if ($(this).hasclass('next')) {      if ($cur.next('div').length === 0) return      $cur.next('div').addclass('active');      $nav.next('a').addclass('active');    } else {      if ($cur.prev('div').length === 0) return      $cur.prev('div').addclass('active');      $nav.prev('a').addclass('active');    }    $cur.removeclass('active')    $nav.removeclass('active')  })    $('.nav a').on('click', function() {    var index = $(this).index();    $(this).closest('.wrap').find('.items div').removeclass('active').eq(index).addclass('active')    $(this).closest('.wrap').find('.nav a').removeclass('active').eq(index).addclass('active')  })

.wrap {    display: block;    width: 200px;    margin: 50px auto;    text-align: center;  }  .nav {    margin-bottom: 10px;  }  .nav {    padding: 5px;  }  .nav a:hover {    font-weight: 900;    cursor: pointer;  }  .nav a.active {    border-bottom: 1px solid black;    font-weight: 900;  }  .prev,  .next {    display: inline-block;    padding: 5px;  }  .prev:hover,  .next:hover {    font-weight: 900;    cursor: pointer;  }  .items div {    display: none;    padding: 25px;  }  .items .one {    background: red;  }  .items .two {    background: green;  }  .items .three {    background: blue;  }  .items .active {    display: inline-block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <div class="wrap">    <div class="nav">      <a class="one">1</a>      <a class="two active">2</a>      <a class="three">3 </a>    </div>    <div class="items">      <span class="prev"><</span>      <div class="one">one</div>      <div class="two active">two</div>      <div class="three">three</div>      <span class="next">></span>    </div>  </div>    <div class="wrap">    <div class="nav">      <a class="one">1</a>      <a class="two active">2</a>      <a class="three">3 </a>    </div>    <div class="items">      <span class="prev"><</span>      <div class="one">one</div>      <div class="two active">two</div>      <div class="three">three</div>      <span class="next">></span>    </div>  </div>