JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
  <div class="slides">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</div>
    <div>Slide 6</div>
  </div>

  <ul class="btns">
    <li class="one"><a href="#">1</a></li>
    <li class="two"><a href="#">2</a></li>
    <li class="three"><a href="#">3</a></li>
    <li class="four"><a href="#">4</a></li>
    <li class="five"><a href="#">5</a></li>
    <li class="six"><a href="#">6</a></li>
  </ul>

CSS

.slides { font-size: 40px; }

JavaScript

var $btns = $('.btns a'), $slides = $('.slides > div');

$btns.click(function(){
  $(this).addClass('current')
  $(this).parent().siblings().find('a').removeClass('current');
  $slides.eq($btns.index(this)).show('slow').siblings().hide('slow');
  return false;
});
$btns.first().click();