Πώς να δημιουργήσετε: Εναλλακτική σελίδα σε ολόκληρη τη σελίδα

Μάθετε πώς να δημιουργήσετε ένα εναλλακτικό σελίδα που καλύπτει ολόκληρη τη σαρωτική οθόνη (πλήρης οθόνη).

Δημιουργία ενός εναλλακτικού σελίδας

Πρώτη βήμα - Προσθήκη HTML:

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Επικοινωνία</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">Σχετικά</button>
<div id="Home" class="tabcontent">
  <h3>Οικισμός</h3>
  <p>Ο οικισμός είναι εκεί όπου βρίσκεται το καρδιά...</p>
</div>
<div id="News" class="tabcontent">
  <h3>Ειδήσεις</h3>
  <p>Μερικές ειδήσεις αυτής της όμορφης ημέρας!</p>
</div>
<div id="Contact" class="tabcontent">
  <h3>Επικοινωνία</h3>
  <p>Επικοινωνήστε μαζί μας ή βεβαιωθείτε για ένα καφέ.</p>
</div>
<div id="About" class="tabcontent">
  <h3>Σχετικά</h3>
  <p>Ποιοι είμαστε και τι κάνουμε.</p>
</div>

Δημιουργία κουμπιών για να ανοίξουν το συγκεκριμένο περιεχόμενο της καρτέλας. Όλα τα στοιχεία με class="tabcontent" του <div> Τα στοιχεία είναι προεπιλεγμένα κρυμμένα (μέσω CSS και JS). Όταν ο χρήστης κάνει κλικ στο κουμπί, ανοίγει το περιεχόμενο της καρτέλας που ταιριάζει με αυτό το κουμπί.

Βήμα 2 - Προσθήκη CSS:

Ρύθμιση της μορφοποίησης των συνδέσμων και του περιεχομένου των καρτελών (καλύπτοντας ολόκληρη τη σελίδα):

/* ρύθμιση του ύψους του σώματος και του document στο 100%，για να ενεργοποιηθεί το "καλύπτοντας ολόκληρη τη σελίδα"
σώμα, html {
  height: 100%;
  διαφορά: 0;
  γενική οικογένεια γραμμάτων: Arial;
}
/* ρύθμιση της μορφοποίησης των συνδέσμων των καρτελών */
.tablink {
  χρώμα υποβάθρου: #555;
  color: white;
  πλεονεκτικός: αριστερά;
  περιθώριο: καμία;
  κλίμακα: καμία;
  δεικτής: βελτιστοποιημένος;
  μακρύτερος: 14px 16px;
  font-size: 17px;
  width: 25%;
}
.tablink:hover {
  background-color: #777;
}
/* Set the style of the tab content (and add height: 100% to the entire page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

Third step - Add JavaScript:

function openPage(pageName, elmnt, color) {
  // 默认隐藏所有 class="tabcontent" 的元素
  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(pageName).style.display = "block";
  // 为用于打开标签页内容的按钮添加特定的颜色
  elmnt.style.backgroundColor = color;
}
// 获取 id="defaultOpen" 的元素并点击它
document.getElementById("defaultOpen").click();

Δοκιμάστε το προσωπικά

Σχετικές σελίδες

Εκμάθηση:Πώς να δημιουργήσω καρτέλα