משתמש:Men770/טיוטה

מתוך חב"דפדיה, אנציקלופדיה חב"דית חופשית
קפיצה לניווט קפיצה לחיפוש

<html>

 <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>

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

<style> /* Style the tab */ div.tab {

   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;

}

/* Style the buttons inside the tab */ div.tab button {

   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;

}

/* Change background color of buttons on hover */ div.tab button:hover {

   background-color: #ddd;

}

/* Create an active/current tablink class */ div.tab button.active {

   background-color: #ccc;

}

/* Style the tab content */ .tabcontent {

   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;

} </style> <script> function openCity(evt, cityName) {

   // Declare all variables
   var i, tabcontent, tablinks;
   // Get all elements with class="tabcontent" and hide them
   tabcontent = document.getElementsByClassName("tabcontent");
   for (i = 0; i < tabcontent.length; i++) {
       tabcontent[i].style.display = "none";
   }
   // Get all elements with class="tablinks" and remove the class "active"
   tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
   // Show the current tab, and add an "active" class to the button that opened the tab
   document.getElementById(cityName).style.display = "block";
   evt.currentTarget.className += " active";

} </script> </html>