W3.JS ซ่อน & แสดง
w3.hide(selector)
การซ่อนองค์ประกอบโดยใช้รหัสองค์ประกอบ
หากต้องการซ่อนองค์ประกอบด้วยรหัสที่ระบุ ให้ใช้แท็กแฮช (#) หน้าชื่อรหัส
ซ่อนองค์ประกอบด้วย id="London":
ตัวอย่าง
<button onclick="w3.hide('#London')">Hide</button>
การซ่อนองค์ประกอบโดยใช้ชื่อแท็ก
หากต้องการซ่อนองค์ประกอบทั้งหมดที่มีชื่อแท็กที่ระบุ ให้ใช้ชื่อแท็ก (ไม่มี < และ >) เป็นตัวเลือก
ซ่อน <h2> องค์ประกอบทั้งหมด:
ตัวอย่าง
<button onclick="w3.hide('h2')">Hide</button>
การซ่อนองค์ประกอบโดยใช้ชื่อคลาส
หากต้องการซ่อนองค์ประกอบทั้งหมดที่มีชื่อคลาสที่ระบุ ให้ใช้จุด (.) นำหน้าชื่อคลาส
ซ่อนองค์ประกอบด้วย class="city":
ตัวอย่าง
<button onclick="w3.hide('.city')">Hide</button>
แสดงองค์ประกอบโดยใช้รหัสองค์ประกอบ
หากต้องการแสดงองค์ประกอบที่มีรหัสที่ระบุ ให้ใช้แท็กแฮช (#) หน้าชื่อรหัส
แสดงองค์ประกอบด้วย id="London":
ตัวอย่าง
<button onclick="w3.show('#London')">Show</button>
แสดงองค์ประกอบโดยใช้ชื่อแท็ก
ในการแสดงองค์ประกอบทั้งหมดที่มีชื่อแท็กที่ระบุ ให้ใช้ชื่อแท็ก (ไม่มี < และ >) เป็นตัวเลือก
แสดงทั้งหมด <h2> องค์ประกอบ:
ตัวอย่าง
<button onclick="w3.show('h2')">Show</button>
แสดงองค์ประกอบโดยใช้ชื่อคลาส
หากต้องการแสดงองค์ประกอบทั้งหมดที่มีชื่อคลาสที่ระบุ ให้ใช้จุด (.) นำหน้าชื่อคลาส
แสดงองค์ประกอบที่มี class="city":
ตัวอย่าง
<button onclick="w3.show('.city')">Show</button>
สลับซ่อน/แสดง
w3.toggleShow(selector)
สลับซ่อนและแสดงโดยใช้รหัสองค์ประกอบ
สลับระหว่างการซ่อนและแสดงองค์ประกอบด้วย id="London":
ตัวอย่าง
<button onclick="w3.toggleShow('#London')">Toggle Hide/Show</button>
สลับซ่อนและแสดงโดยใช้ชื่อแท็ก
สลับระหว่างการซ่อนและแสดงองค์ประกอบ <h2> ทั้งหมด:
ตัวอย่าง
<button onclick="w3.toggleShow('h2')">Toggle Hide/Show</button>
สลับซ่อนและแสดงโดยใช้ชื่อคลาส
สลับระหว่างการซ่อนและแสดงองค์ประกอบด้วย class="city":
ตัวอย่าง
<button onclick="w3.toggleShow('.city')">Toggle Hide/Show</button>