|
|
| שורה 1: |
שורה 1: |
| <html><div class="tab">
| | {{לשוניות |
| <button class="tablinks" onclick="openCity(event, 'London')">משיח</button>
| | |שם1=עמוד ראשי|תוכן1|{{:עמוד ראשי}} |
| <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
| | |שם2=גאולה|תוכן={{:גאולה}} |
| <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
| | |שם3=חסיד|תוכן3={{:חסיד}} |
| </div>
| | }} |
| </html>
| |
| <div id="London" class="tabcontent">
| |
| <h3>משיח</h3>
| |
| <p>{{:עמוד ראשי}}</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>
| |
| <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>
| |