larskotthoff/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>

div .tests {
  float: none;
  margin:auto;
  text-align: center;
  font: 20px sans-serif;
  font-weight: bold;
  display: table;
  width: 100%;
}

.testlink {
  color: #000;
  text-decoration: none;
}

div .test {
    display: table-cell;
    width: 33.3333%;
    text-align: center;
}
</style>
</head>
<body>
<div class="tests">
  <div class="test"><a href="#" class="testlink" id="test1" onclick="showTest1()">test 1</a></div>
  <div class="test"><a href="#" class="testlink" id="test2" onclick="showTest2()">test 2</a></div>
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script>

var selectedColor = "#9467bd";
var notSelectedColor = "#ffffff";

d3.select("#test1").style("background", notSelectedColor);
d3.select("#test2").style("background", notSelectedColor);

function showTest1(){
  d3.select("#test1").transition().duration(2000).style("background", selectedColor);
  d3.select("#test2").transition().duration(2000).style("background", notSelectedColor);
}
function showTest2(){
  d3.select("#test1").transition().duration(2000).style("background", notSelectedColor);
  d3.select("#test2").transition().duration(2000).style("background", selectedColor);
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<style>

	div .tests {
	float: none;
	margin:auto;
	text-align: center;
	font: 20px sans-serif;
	font-weight: bold;
	display: table;
	width: 100%;
	}

	.testlink {
	color: #000;
	text-decoration: none;
	}

	div .test {
	display: table-cell;
	width: 33.3333%;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div class="tests">
	<div class="test"><a href="#" class="testlink" id="test1" onclick="showTest1()">test 1</a></div>
	<div class="test"><a href="#" class="testlink" id="test2" onclick="showTest2()">test 2</a></div>
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

	<script>

	var selectedColor = "#9467bd";
	var notSelectedColor = "#ffffff";

	d3.select("#test1").style("background", notSelectedColor);
	d3.select("#test2").style("background", notSelectedColor);

	function showTest1(){
	d3.select("#test1").transition().duration(2000).style("background", selectedColor);
	d3.select("#test2").transition().duration(2000).style("background", notSelectedColor);
	}
	function showTest2(){
	d3.select("#test1").transition().duration(2000).style("background", notSelectedColor);
	d3.select("#test2").transition().duration(2000).style("background", selectedColor);
	}

	</script>
	</body>
	</html>