Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
<div id="buttons">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
  
<div id="divs">
  <div class="c1">1</div>
  <div class="c2">2</div>
  <div class="c3">3</div>
  <div class="c4">4</div>
  <div class="c5">5</div>
</div>
  
  
</body>
</html>
 
#buttons > div{
  background:#cf5;
  cursor:pointer;
  display:inline;
  border:2px solid #eee;
}
#buttons > div.on{
  border:2px solid #fc0;
}
​
#divs > div{
  display:none;
}
 
$('#buttons > div').click(function(){
  var i = $(this).index();
  $('#buttons > div').removeClass('on').eq(i).addClass('on');
  $('#divs > div').hide().eq(i).show();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers