The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
 
 a
 {
 	font: 1.5em/1 Georgia;
 	display: inline-block;
 	margin: 0 1em;
 }
 
 #boxes
 {
 	list-style: none;
 	margin: 4em 0 0 0;
 	padding: 0;
 }
 
 #boxes li
 {
 	display: inline-block;
 	margin: 0 1em;
 	width: 4em;
 	height: 4em;
 	background: #048;
 }
 
 .foo
 {
 	background-color: orange;
 }

dabblet.html

<a id="foo" tabindex="0">foo</a>
<a id="bar" tabindex="0">bar</a>
<a id="foobar" tabindex="0">foo bar</a>

<ul id="boxes">
	<li class="foo"></li>
	<li class="bar"></li>
	<li class="foo bar"></li>
</ul>

dabblet.js

var anchors = document.querySelectorAll('a');
var boxes = document.querySelector('boxes');

for (var i = 0, l = anchors.length; i < l; i++)
{
	anchors[i].addEventListener('click', function () { boxes.className = 'foo' }, false);
}

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}