ลอนดอน
ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ
มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่กรุงเทพมหานครและปริมณฑลกว่า 13 ล้านคนที่อาศัยอยู่
ปารีส
ปารีสเป็นเมืองหลวงของประเทศฝรั่งเศส
พื้นที่ปารีสเป็นหนึ่งในที่ใหญ่ที่สุดศูนย์ประชากรในยุโรปที่มีมากกว่า 12 ล้านคนที่อาศัยอยู่
โตเกียว
โตเกียวเป็นเมืองหลวงของประเทศญี่ปุ่น
มันเป็นศูนย์กลางของมหานครโตเกียวพื้นที่และพื้นที่มหานครที่มีประชากรมากที่สุดในโลก
แท็บ (tabulators)
แท็บที่สมบูรณ์แบบสำหรับการใช้งานเว็บหน้าเดียวหรือสำหรับหน้าเว็บที่มีความสามารถในการแสดงวิชาที่แตกต่าง
เพียงแค่สร้างองค์ประกอบหลายคนที่มีชื่อชั้นเดียวกัน
ตัวอย่าง
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
city of England.</p>
</div>
<div id="Paris" class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
แล้วเพิ่มปุ่มคลิกได้บางส่วนเพื่อเปิดเนื้อหา (ปุ่มเดียวแถบนำทาง, sidenav ฯลฯ .. ):
ตัวอย่าง
<ul class="w3-navbar">
<li><a href="#" onclick="openCity('London')">London</a></li>
<li><a href="#" onclick="openCity('Paris')">Paris</a></li>
<li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>และเพิ่ม JavaScript เพื่อเลือกองค์ประกอบ:
ตัวอย่าง
openCity("London");
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
ลองตัวเอง» อธิบาย JavaScript
ครั้งแรกเรียก openCity () เพื่อเปิด "ลอนดอน" (id = "ลอนดอน)
แล้วเรียกเปิดซิตี้ () กับชื่อเมืองที่แตกต่างกัน (id = "ปารีส) เมื่อผู้ใช้คลิกที่ปุ่มใดปุ่มหนึ่งในเมนู
openCity () ฟังก์ชันซ่อนองค์ประกอบทั้งหมด (จอแสดงผล = "ไม่มี") ที่มีชื่อชั้น "เมือง" และแสดงองค์ประกอบ (จอแสดงผล = "บล็อก") ที่มีรหัสเมืองได้รับ
งาน / แท็บปัจจุบัน
หากคุณต้องการที่จะเน้นแท็บปัจจุบัน / หน้าผู้ใช้อยู่ในใช้ JavaScript และเพิ่มระดับสีที่เฉพาะเจาะจงเพื่อเชื่อมโยงแท็บปัจจุบัน ในตัวอย่างด้านล่างเราได้เพิ่ม "tablink" ชั้นจะเชื่อมโยงแต่ละ วิธีการที่มันเป็นเรื่องง่ายที่จะได้รับการเชื่อมโยงทั้งหมดที่เกี่ยวข้องกับแท็บและให้การเชื่อมโยงแท็บปัจจุบัน "W3 แดง" ชั้นเพื่อเน้นมัน
ตัวอย่าง
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
ลองตัวเอง» แท็บแนวตั้ง
ตัวอย่าง
<nav class="w3-sidenav w3-light-grey" style="width:130px">
<a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
<a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
<a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</nav>
ลองตัวเอง» แท็บเนื้อหาเคลื่อนไหว
ใช้ใด ๆ ของชั้นเรียน W3-animate- จะจางหายไป, ซูมหรือภาพนิ่งในเนื้อหาแท็บ
ตัวอย่าง
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
ลองตัวเอง» แกลเลอรี่ภาพแท็บ
× 
× 
× 
× ตัวอย่าง
<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div> ลองตัวเอง» แท็บในตาราง
การใช้แท็บในรูปแบบคอลัมน์ที่สาม โปรดทราบว่าเราเพิ่มขอบด้านล่างไปที่แท็บที่ใช้งานแทนสีพื้นหลัง: