HTML
CSS
JavaScript
jQuery

[jQuery]ボタンで切り替えるスライドの実装方法

ボタンで切り替えるスライドの実装方法

sample.html
<html>
<body>
<div class="active">A</div>
<div >B</div>
<div >C</div>
<div >D</div>

<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</body>
</html>
sample.css
div{
  width:200px;
  height:200px;
  border: 2px solid black;
  margin-bottom:10px;
  display:none;
}

.active{
  display:block;
}
sample.js
$(function(){
  $('button').click(function(){
    var clickedButton = $('button').index($(this));

    $('.active').removeClass('active');
    $('div').eq(clickedButton).addClass('active');
  });
});