Edit in JSFiddle

$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').animate({left:-250*(parseInt(integer)-1)})
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });    
});

<div id="button">
         <a class="button1 active" rel="1" href="#"></a>
         <a class="button2" rel="2" href="#"></a>
         <a class="button3" rel="3" href="#"></a>
    </div> 
 
    <div class="clear"></div>
    <div id="myslide">
        <div class="cover">
            <div class="mystuff">
                スライダーの中身01
            </div>
            <div class="mystuff">
                スライダーの中身02
            </div>
            <div class="mystuff">
                スライダーの中身03
            </div>
        </div> 
    </div> 

#myslide {width:160px;overflow:hidden;position: relative;height:170px;margin-bottom:20px}
    #myslide .cover{
        width:750px; 
        position: absolute;
        height:160px;
    }
    #myslide .mystuff {width:250px;float:left;padding:20px 0;}
.button1,.button2,.button3{background:#999;padding:6px;display:block;float:left;margin-right:5px;}
.active{background:#111;padding:6px;display:block;float:left;outline:none;}
.clear{clear:both;}