Выбор активного блока

function openbox(id, menuId) { 
  var items = [ 
    'box1', 
    'box2', 
    'box3', 
    'box4' 
  ]; 
 
  var menus = [ 
    'menu1', 
    'menu2', 
    'menu3', 
    'menu4' 
  ] 
  document.getElementById(menuId).className = 'menu_item_active'; 
  document.getElementById(id).style.display = 'block'; 
 
  for (var i = 0, length = items.length; i < length; i++) { 
    if (id != items[i]) { 
      document.getElementById(items[i]).style.display = 'none'; 
    } 
  } 
 
  for (var i = 0, length = menus.length; i < length; i++) { 
    if (id != items[i]) { 
      document.getElementById(menus[i]).className = 'menu_item'; 
    } 
  } 
}

.menu_item { 
  width: 25%; 
  display: inline; 
} 
 
#box1 { 
  display: block; 
} 
 
.menu_item:hover { 
  cursor: pointer; 
} 
 
.menu_item_active { 
  width: 25%; 
  display: inline; 
  background: red; 
} 
 
.content_item { 
  display: none; 
}

<div class="menu"> 
  <div class="menu_item_active" id="menu1" onclick="openbox('box1', 'menu1')">1 пункт меню</div> 
  <div class="menu_item" id="menu2" onclick="openbox('box2', 'menu2')">2 пункт меню</div> 
  <div class="menu_item" id="menu3" onclick="openbox('box3', 'menu3')">3 пункт меню</div> 
  <div class="menu_item" id="menu4" onclick="openbox('box4', 'menu4')">4 пункт меню</div> 
</div> 
<div class="content"> 
  <div class="content_item" id="box1">Выбран 1 пункт</div> 
  <div class="content_item" id="box2">Выбран 2 пункт</div> 
  <div class="content_item" id="box3">Выбран 3 пункт</div> 
  <div class="content_item" id="box4">Выбран 4 пункт</div> 
</div>