עריכת הדף "תבנית:לשוניות"

<html><div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">{{{שם1}}}</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">{{{שם2}}}</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">{{{שם3}}}</button>
</div>
</html>
<div id="London" class="tabcontent">
  <h3>{{{שם1}}}</h3>
  <p>{{{תוכן1}}}</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>{{{שם2}}}</h3>
  <p>{{{תוכן2}}}</p>
</div>

<div id="Tokyo" class="tabcontent">
  h3>{{{שם3}}}</h3>
  <p>{{{תוכן3}}}</p>
</div>
<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>
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>
@@ שורה 1: / שורה 1: @@
-<noinclude>{{ניהול פרמטרים/תוכן}}</noinclude><includeonly>{{#invoke:ParamValidator|validateparams|module_options=יחידה:PV-options}}</includeonly><includeonly>{{טען סקריפט|gadgetname=Tabs}}<div id="custom{{{זיהוי|}}}TabsWait" style="font-size: small; color: green;" class="loadingTabsTemplate">טוען את הלשוניות... {{#תנאי:{{{תוכן חלופי|}}}|<small>(אם הדף אינו נטען במלואו כעבור מספר שניות, באפשרותכם לראות את הטקסט המלא בדף [[{{{תוכן חלופי}}}|זה]])</small>}}</div><div id="custom{{{זיהוי|}}}Tabs" class="tabsTemplate">{{#תנאי:{{{שם1|}}}|<div id="custom{{{זיהוי|}}}Tab1" title="{{{שם1}}}">
+<html><div class="tab">
-{{{תוכן1|}}}</div>}}{{#תנאי:{{{שם2|}}}|<div id="custom{{{זיהוי|}}}Tab2" title="{{קידוד | {{{שם2}}} }}">
+  <button class="tablinks" onclick="openCity(event, 'London')">{{{שם1}}}</button>
-{{{תוכן2|}}}</div>}}{{#תנאי:{{{שם3|}}}|<div id="custom{{{זיהוי|}}}Tab3" title="{{קידוד | {{{שם3}}} }}">
+  <button class="tablinks" onclick="openCity(event, 'Paris')">{{{שם2}}}</button>
-{{{תוכן3|}}}</div>}}{{#תנאי:{{{שם4|}}}|<div id="custom{{{זיהוי|}}}Tab4" title="{{קידוד | {{{שם4}}} }}">
+  <button class="tablinks" onclick="openCity(event, 'Tokyo')">{{{שם3}}}</button>
-{{{תוכן4|}}}</div>}}{{#תנאי:{{{שם5|}}}|<div id="custom{{{זיהוי|}}}Tab5" title="{{קידוד |  {{{שם5}}} }}">
+</div>
-{{{תוכן5|}}}</div>}}{{#תנאי:{{{שם6|}}}|<div id="custom{{{זיהוי|}}}Tab6" title="{{קידוד | {{{שם6}}} }}">
+</html>
-{{{תוכן6|}}}</div>}}{{#תנאי:{{{שם7|}}}|<div id="custom{{{זיהוי|}}}Tab7" title="{{קידוד | {{{שם7}}} }}">
+<div id="London" class="tabcontent">
-{{{תוכן7|}}}</div>}}{{#תנאי:{{{שם8|}}}|<div id="custom{{{זיהוי|}}}Tab8" title="{{קידוד | {{{שם8}}} }}">
+  <h3>{{{שם1}}}</h3>
-{{{תוכן8|}}}</div>}}{{#תנאי:{{{שם9|}}}|<div id="custom{{{זיהוי|}}}Tab9" title="{{קידוד | {{{שם9}}} }}">
+  <p>{{{תוכן1}}}</p>
-{{{תוכן9|}}}</div>}}{{#תנאי:{{{שם10|}}}|<div id="custom{{{זיהוי|}}}Tab10" title="{{קידוד | {{{שם10}}} }}">
+</div>
-{{{תוכן10|}}}</div>}}{{#תנאי:{{{ברירת מחדל|}}}|<div id="custom{{{זיהוי|}}}TabDefault">{{{ברירת מחדל}}}</div>}}{{#תנאי:{{{רוחב|}}}|<div id="custom{{{זיהוי|}}}TabWidth">{{{רוחב}}}</div>}}{{#תנאי:{{{גבול|}}}|<div id="custom{{{זיהוי|}}}TabBorder">{{{גבול}}}</div>}}{{#תנאי:{{{רקע|}}}|<div id="custom{{{זיהוי|}}}TabBackground">{{{רקע}}}</div>}}{{#תנאי:{{{יישור|}}}|<div id="custom{{{זיהוי|}}}TabAlign">{{{יישור}}}</div>}}</div></includeonly><noinclude>
-{{/תיעוד}}
+<div id="Paris" class="tabcontent">
+  <h3>{{{שם2}}}</h3>
+  <p>{{{תוכן2}}}</p>
+</div>
-<templatedata>
+<div id="Tokyo" class="tabcontent">
-{
+  h3>{{{שם3}}}</h3>
-	"params": {
+  <p>{{{תוכן3}}}</p>
-		"זיהוי": {},
+</div>
-		"תוכן חלופי": {},
+<html>
-		"שם1": {},
+<style>
-		"תוכן1": {},
+/* Style the tab */
-		"שם2": {},
+div.tab {
-		"תוכן2": {},
+    overflow: hidden;
-		"שם3": {},
+    border: 1px solid #ccc;
-		"תוכן3": {},
+    background-color: #f1f1f1;
-		"שם4": {},
-		"תוכן4": {},
-		"שם5": {},
-		"תוכן5": {},
-		"שם6": {},
-		"תוכן6": {},
-		"שם7": {},
-		"תוכן7": {},
-		"שם8": {},
-		"תוכן8": {},
-		"שם9": {},
-		"תוכן9": {},
-		"שם10": {},
-		"תוכן10": {},
-		"ברירת מחדל": {},
-		"רוחב": {},
-		"גבול": {},
-		"רקע": {},
-		"יישור": {}
-	}
 }
-</templatedata>
-</noinclude>
+/* 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>
+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>