Skip to content

Instantly share code, notes, and snippets.

@rambhairao

rambhairao/index_example.html

Last active September 5, 2017 05:50
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rambhairao/761374c19114de6acaedfa9c368eb345 to your computer and use it in GitHub Desktop.
Save rambhairao/761374c19114de6acaedfa9c368eb345 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source http://jsbin.com/fudife
Raw
index_example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<title>JS Bin</title>
<style id="jsbin-css">
li{
display: inline-block;
background-color: red;
padding: 5px;
margin: 5px;
border-radius: 4px;
transition: 1s all;
}
</style>
</head>
<body>
<span > garbage collection </span >
<div> collection of outer space- </div>
<div> collection of outer space-1 </div>
<div> collection of outer space-2 </div>
<div> collection of outer space-3 </div>
<div> collection of outer space-4 </div>
<ul>
<li > collection 1 </li>
<li > collection 2 </li>
<li > collection 3 </li>
<li > collection 4 </li>
<li > collection 5 </li>
</ul>
<script id="jsbin-javascript">
$(document).ready(function(){
$('div').on('click', function(){
var ind = $('div').index(this);
$('ul li').eq(ind).css("background-color", "yellow").siblings().css("background-color", "red");
});
});
</script>
<script id="jsbin-source-css" type="text/css">li{
display: inline-block;
background-color: red;
padding: 5px;
margin: 5px;
border-radius: 4px;
transition: 1s all;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
$('div').on('click', function(){
var ind = $('div').index(this);
$('ul li').eq(ind).css("background-color", "yellow").siblings().css("background-color", "red");
});
});</script></body>
</html>
Raw
jsbin.fudife.css
li{
display: inline-block;
background-color: red;
padding: 5px;
margin: 5px;
border-radius: 4px;
transition: 1s all;
}
Raw
jsbin.fudife.js
$(document).ready(function(){
$('div').on('click', function(){
var ind = $('div').index(this);
$('ul li').eq(ind).css("background-color", "yellow").siblings().css("background-color", "red");
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment