תבנית:לשוניות

אופן השימוש

פרמטרים

שםX - כתורת הלשונית X.
תוכןX - תוכן הלשונית X.
X הוא מספר הלשונית. (ניתן עד 3 לשוניות)

דוגמא

קוד:
{{לשוניות |שם1=שם הלשונית הראשונה|תוכן1=התוכן שלה |שם2=שם|תוכן2=תוכן |שם3=שם|תוכן3=תוכן }}
הקוד הזה יכתוב:

<html>

 <button id="LondonButton" class="tablinks" onclick="openCity(event, 'London')">שם הלשונית הראשונה</button>
 <button id="ParisButton" class="tablinks" onclick="openCity(event, 'Paris')">שם</button>
 <button id="TokyoButton" class="tablinks" onclick="openCity(event, 'Tokyo')">שם</button>

</html>

התוכן שלה

תוכן

<html> <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: right;
   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> document.getElementById("LondonButton").textContent=document.getElementById("LondonTabHeadText").textContent; document.getElementById("ParisButton").textContent=document.getElementById("ParisTabHeadText").textContent; document.getElementById("TokyoButton").textContent=document.getElementById("TokyoTabHeadText").textContent;

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>

התבנית תומכת בשלושה טאבים.