Skip to content

Instantly share code, notes, and snippets.

Created February 1, 2012 18:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/1718650 to your computer and use it in GitHub Desktop.
Save anonymous/1718650 to your computer and use it in GitHub Desktop.
<html>
<head>
<style>
.target {
background: green;
border: 20px solid blue;
border-style: solid;
padding: 2em;
}
li {
background: #F00;
border: 0px solid black;
padding: 1em;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
</style>
<script>
function handleClick ( event ) {
if(this.lastNode) {
this.lastNode.className = "";
if (event.target.id == "item-1")
return;
}
var target = event.target;
switch(true) {
case (target.nodeType === 3):
// fix safari bug
target = target.parentNode;
break;
case (target.nodeName === "A"):
// goto LI
target = target.parentNode;
break;
}
this.lastNode = target;
target.className = "target";
}
document.addEventListener('click', handleClick, false);
</script>
</head>
<body>
<ul class="toggle">
<li id="item-1">Item 1</li>
<li id="item-2">Item 2</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment