แท็บการนำทาง W3.CSS
ลอนดอน
ลอนดอนเป็นเมืองหลวงของอังกฤษ
เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 9 ล้านคน
การนำทางแบบแท็บ
การนำทางแบบแท็บเป็นวิธีนำทางไปยังส่วนต่างๆ ของเว็บไซต์
โดยปกติ การนำทางแบบแท็บจะใช้ปุ่มนำทาง (แท็บ) ที่จัดเรียงพร้อมกับแท็บที่เลือกไว้ซึ่งไฮไลต์ไว้
ตัวอย่างนี้ใช้องค์ประกอบที่มีชื่อคลาสเดียวกัน ("เมือง" ในตัวอย่างของเรา) และเปลี่ยนรูปแบบระหว่างdisplay:noneและ display:blockเพื่อซ่อนและแสดงเนื้อหาที่แตกต่างกัน:
ตัวอย่าง
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
และบางปุ่มที่คลิกได้เพื่อเปิดเนื้อหาแบบแท็บ:
ตัวอย่าง
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
และ JavaScript เพื่อทำงาน:
ตัวอย่าง
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()ถูกเรียกเมื่อผู้ใช้คลิกที่ปุ่มใดปุ่มหนึ่งในเมนู
ฟังก์ชั่นซ่อนองค์ประกอบทั้งหมดที่มีชื่อคลาส "เมือง" ( display="none" ) และแสดงองค์ประกอบด้วยชื่อเมืองที่กำหนด ( display="block" );
แท็บที่ปิดได้
ลอนดอน
ลอนดอนเป็นเมืองหลวงของอังกฤษ
หากต้องการปิดแท็บ ให้เพิ่มonclick="this.parentElement.style.display='none'" ให้กับองค์ประกอบภายในคอนเทนเนอร์แท็บ:
ตัวอย่าง
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
ใช้งานอยู่/แท็บปัจจุบัน
หากต้องการเน้นแท็บ/หน้าปัจจุบันที่ผู้ใช้เปิดอยู่ ให้ใช้ JavaScript และเพิ่มคลาสสีให้กับลิงก์ที่ใช้งานอยู่ ในตัวอย่างด้านล่าง เราได้เพิ่มคลาส "แท็บลิงก์" ให้กับแต่ละลิงก์ ด้วยวิธีนี้ ง่ายต่อการรับลิงก์ทั้งหมดที่เกี่ยวข้องกับแท็บ และกำหนดคลาส "w3-red" ให้กับลิงก์แท็บปัจจุบันเพื่อเน้น:
ตัวอย่าง
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-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</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="#" 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>
แท็บใน Grid
การใช้แท็บในเค้าโครงคอลัมน์ที่สาม โปรดทราบว่าเราเพิ่มเส้นขอบด้านล่างให้กับแท็บที่ใช้งานอยู่ แทนที่จะเป็นสีพื้นหลัง: