f1a023777d7fa4439290 by larskotthoff

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="//d3js.org/d3.v3.min.js"></script>
<script src="//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>