SOURCE

window.onload = function() {
  var btn = document.getElementById('btn');
  var input = btn.getElementsByTagName('input');
  var box = document.getElementById('box');
  var box1 = box.getElementsByClassName('box1');
  var one = document.getElementById('one');
  var arr = ['red', 'blue', 'green', 'orange', 'purple'];

  one.style.backgroundColor = 'red';
  for (var i = 0; i < input.length; i++) {
    input[i].index = i;
    input[i].onclick = function() {
      for (var i = 0; i < input.length; i++) {
        box1[i].style.display = 'none';
      }
      input[this.index].style.backgroundColor = arr[this.index];
      box1[this.index].style.display = 'block';
      box1[this.index].style.backgroundColor = arr[this.index];
    }
  }
}

<div id="bat">
  <div id="btn">
    <input type="button" value="首页">
    <input type="button" value="导航">
    <input type="button" value="博客">
    <input type="button" value="论坛">
    <input type="button" value="空间">
  </div>
  <div id="box">
    <div class="box1" id='one'>
      首页
    </div>
    <div class="box1">
      导航
    </div>
    <div class="box1">
      博客
    </div>
    <div class="box1">
      论坛
    </div>
    <div class="box1">
      空间
    </div>
  </div>
</div>

*,
input {
  padding: 0;
  margin: 0;
}

#bat {
  width: 500px;
  height: 600px;
  margin: 30px auto;
  border: 1px solid red;
}

#btn {
  width: 500px;
  height: 50px;
}

input {
  width: 100px;
  height: 50px;
  float: left;
  border: none;
  color: #345;
}

input:visited {
  border: none;
  color: #fff;
  background: red;
}

#box div {
  width: 500px;
  height: 550px;
  background-color: red;
  text-align: center;
  line-height: 550px;
  display: none;
}

#box div:nth-child(1) {
  background-color: red;
  display: block;
}