Modifica css a tab attivo/over

[ivanisevic82]

Ciao a tutti, mi sto cimentando per la prima volta con le "tab".

Posto un esempio tratto da W3C e da me semplificato:

<style>

.tablink {
  color: #000;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 35%;
background: rgba(0,0,0,0.0);
}


.tablink:hover {
border-bottom: 5px solid #429923;
}


/* Style the tab content */
.tabcontent {
  color: #000;
  display: none;
  padding-top: 60px;
  text-align: left;


}


</style>


<button class="tablink" onclick="openCity('London', this, 'blue')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>


<div id="London" class="tabcontent">
  <h1>London</h1>
  <p>London is the capital city of England.</p>
</div>


<div id="Paris" class="tabcontent">
  <h1>Paris</h1>
  <p>Paris is the capital of France.</p> 
</div>


<script>
function openCity(cityName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;


}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Vorrei raggiungere il seguente obbiettivo: sia in fase "hover" che in fase "active" vorrei che ci fosse solo un border-bottom e non un background color.

Purtroppo non so lavorare in JS e quindi non riesco a modificare il codice...

Potete aiutarmi?

Grazie!