Simple Content Changer without slide

by Can

HTML

<div class="slider-container">
    <div class="slider-content">
        Content 1 
    </div>
    <div class="slider-content hide">
        Content 2 
    </div>
    <div class="slider-content hide">
        Content 3 
    </div>
</div>
<div class="slider-nav">
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</div>

CSS

.slider-content { width: 300px; height: 300px; margin-bottom: 20px; background: tomato }

.slider-nav a { background: #e3e3e3; display: inline-block; text-decoration: none;
  border: 1px solid #bbb;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 8px 0 9px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 150px; }
.slider-nav a:hover {   background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer; }
.slider-nav a:active { 
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #000; }
.slider-nav .active { color: red }
.hide { display: none }

JavaScript

$('.slider-nav').on('click', 'a' , function(e){
    e.preventDefault();
    var $this = $(this);
    $('.slider-container .slider-content')
        .hide()
        .eq($this.index())
        .show();
    $this.addClass('active')
        .siblings()
        .removeClass('active');
});