JavaScript - Tab que al cargar web este abierta el primer tab

<!-- Tab links -->

<div class="tab">

  <button class="tablinks" onclick="openCity(event, 'London')">London</button>

  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>

  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

</div>

<!-- Tab content -->

<div id="London" class="tabcontent">

  <h3>London</h3>

  <p>London is the capital city of England.</p>

</div>

<div id="Paris" class="tabcontent">

  <h3>Paris</h3>

  <p>Paris is the capital of France.</p>

</div>

<div id="Tokyo" class="tabcontent">

  <h3>Tokyo</h3>

  <p>Tokyo is the capital of Japan.</p>

</div>

<style>

/* Estilo del TAB */

.tab {

	overflow: hidden;

	border: 1px solid #ccc;

	background-color: #FF9751;

	text-align: left;

}

/* Para abrir el contenido de la pestaña */

.tab button {

  background-color: #FF9751;

  float: left;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 14px 16px;

  transition: 0.3s;

}

/* Color boton sobre */

.tab button:hover {

  background-color: #FF6600;

}

/* Boton Activo */

.tab button.active {

  background-color: #FF6600;

}

/* Estilo del TAB */

.tabcontent {

	display: none;

	padding: 6px 12px;

	border: 1px solid #ccc;

	border-top: none;

	text-align: left;

}

body,td,th {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	text-align: center;

}

.hy {

	text-align: right;

}

.gk {

	font-weight: bold;

}

.typ {

	text-align: left;

}

.typ {

	text-align: left;

}

#apDiv1 {

	position: absolute;

	left: 251px;

	top: 18px;

	width: 807px;

	height: 82px;

	z-index: 1;

}

#Novedades {

	text-align: left;

}

#apDiv2 {

	position: absolute;

	left: 820px;

	top: 137px;

	width: 96px;

	height: 116px;

	z-index: 1;

}

a:link {

	color: #000000;

	text-decoration: none;

}

a:visited {

	text-decoration: none;

	color: #000;

}

a:hover {

	text-decoration: none;

	color: #000000;

}

a:active {

	text-decoration: none;

	color: #000;

}

.typ {	text-align: left;

}

.typ {	text-align: left;

}

.tabla1g {

	margin: 0px;

	padding: 0px;

}

</style>

<script>

function openCity(evt, cityName) {

  // DECLARO LAS VARIABLES

  var i, tabcontent, tablinks;

  // Obtenga todos los elementos con class = "tabcontent" y escóndelos

  tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {

    tabcontent[i].style.display = "none";

  }

  // Obtenga todos los elementos con class = "tablinks" y elimine la clase "active"

  tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].className = tablinks[i].className.replace(" active", "");

  }

  // Mostrar la pestaña actual y agregar una clase "activa" al botón que abrió la pestaña

  document.getElementById(cityName).style.display = "block";

  evt.currentTarget.className += " active";

}

</script>

  <div class="tab">

          <button class="tablinks" onClick="openCity(event, '1')" ><b>1</b></button>

          <button class="tablinks" onClick="openCity(event, '2')"><b>2</b></button>

          <button class="tablinks" onClick="openCity(event, '3')"><b>3</b></button>

          <button class="tablinks" onClick="openCity(event, '4')"><b>4</b></button>

  </div>

   <!-- CONTENIDOS DE LOS TAB -->

<div id="1" class="tabcontent">

<h5>Titulo 1</h5>

</div>

<!----------------TABLA TAB 2 ---------------------->

<div id="2" class="tabcontent">

<h5>Titulo 2</h5>

</div>

<!----------------TABLA TAB 3 ---------------------->

<div id="3" class="tabcontent">

<h5>Titulo 3</h5>

</div>

<!----------------TABLA TAB 4 ---------------------->

<div id="4" class="tabcontent">

<h5>Titulo 4</h5>

</div>

<div id="London" class="tabcontent" style="display:block">