การสร้างแท็บใน CSS โดยไม่ต้องใช้ JavaScript

แท็บ CSS นั้นยอดเยี่ยมมากในการแสดงข้อมูลที่เกี่ยวข้องในที่เดียวที่ง่ายต่อการนำทาง โดยพื้นฐานแล้วจะดูเหมือนวงเวียนแบบแท็บที่คุณจะเห็นในกล่องสูตรหรือสารยึดเกาะ ต่อไปนี้คือตัวอย่างบางส่วนของเว็บไซต์ที่ใช้การนำทางแบบแท็บ:

Southwest Airlines ใช้การนำทางแบบแท็บเพื่อให้ผู้ใช้นำทางระหว่างการเช็คอินสำหรับเที่ยวบิน จองเที่ยวบิน หรือเพิ่มโรงแรมลงในการจอง
องค์กรใช้แท็บสำหรับการนำทางเพื่อให้ผู้ใช้ตัดสินใจระหว่างการเช่าหรือซื้อ และเรียนรู้เกี่ยวกับบริการอื่นๆ ของตน

เมื่อคุณสังเกตทั้งสองไซต์นี้ ลองนึกถึงข้อดีของการใช้องค์ประกอบ UI ดังกล่าวบนไซต์ มันแก้ปัญหาอะไรได้บ้าง? ข้อมูลประเภทใดที่การนำทางแบบแท็บจะนำไปใช้ได้ดี

เมื่อคุณต้องการเข้าถึงโครงสร้าง UI ที่จัดระเบียบข้อความหรือข้อมูลให้เป็นส่วนประกอบที่มีความหมายและแสดงบนหน้าจอโดยไม่ต้องใช้พื้นที่มากเกินไป การนำทางแบบแท็บเป็นตัวเลือกที่ชาญฉลาด เราจะพูดถึงการนำทางแบบแท็บในเชิงลึกมากขึ้นเมื่อเราเริ่มใช้ JavaScript, jQuery และ/หรือ Bootstrap แต่ก็ยังมีการใช้งานที่เราสามารถใช้ได้ซึ่งต้องใช้ HTML และ CSS ล้วนๆ มาดูการตั้งค่ากัน:

ตั้งค่า HTML ของคุณ:

ไปข้างหน้าและตั้งค่า HTML ต้นแบบของคุณด้วยคอนเทนเนอร์ภายในเนื้อหาที่จะทำหน้าที่เป็นคอนเทนเนอร์หลักของเราสำหรับโครงการ คุณสามารถเรียกมันว่าอะไรก็ได้ที่คุณต้องการในแอตทริบิวต์ class แต่ฉันจะเรียกมันว่า class=”tabs” . จนถึงตอนนี้ HTML ของคุณควรมีลักษณะดังนี้:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Tabs</title>
   <style> /* No CSS to display yet */ </style>
</head>
<body>
   <div class="tabs"></div>
<body>
</html>

ภายใน “tabs” <div> เราจะแทรก

อีกสี่ตัวและเรียกแต่ละอันด้วยคลาสของ tab . นี่แสดงถึงแต่ละแท็บสี่แท็บที่เราจะเขียนขึ้นในวันนี้ โดยจะมีข้อมูลป้อนเข้า ป้ายกำกับแท็บ และเนื้อหาแท็บ มาทำภาชนะเปล่าสำหรับสิ่งเหล่านี้กัน:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Tabs</title>
   <style> /* No CSS to display yet */ </style>
</head>
<body>
   <div class="tabs">
	<div class="tab">
	     /* THIS IS OUR PLAN IN ACTION*/
		/*input */ 
		<input type="radio" id="tab-1" name="tab-group-1" checked/>
 	       /*label for input */
		<label for="tab-1">Label 1</label>
             /* content */
             <div class="content">Our content will go here</div>
 
</div>
	<div class="tab">
		<input type="radio" id="tab-2" name="tab-group-1" checked/>
		<label for="tab-2">Label 2</label>
             <div class="content gryffindor">Our content will go here</div>
       </div>
	<div class="tab">Try these two on your own! Follow the same convention as above for your class names and ids - I am using a HP theme, but name them whatever you'd like!</div>
	<div class="tab"></div>
   </div>
<body>
</html>

ภายในชื่อคลาสเนื้อหาจะเป็นเนื้อหาของเรา คุณจะใช้เนื้อหาอะไรก็ได้ตามต้องการ แต่การใช้เนื้อหาที่เกี่ยวข้องกันในแท็บเดียวถือเป็นแนวทางปฏิบัติมาตรฐาน

เวลาเริ่มต้น CSS:

เมื่อพูดถึงการเขียน CSS ให้เริ่มที่คอนเทนเนอร์ที่ใหญ่ที่สุดและดำเนินการตามแบบของคุณไปยังคอนเทนเนอร์ที่เล็กที่สุด นี่คือขั้นต่ำที่เราต้องทำเพื่อให้มันทำงาน:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ตั้งค่าตัวเลือกไวด์การ์ดเป็น box-sizing:border-box
บนคอนเทนเนอร์หลัก เราจำเป็นต้องตั้งค่าคุณสมบัติการแสดงผลเป็น flex และตั้งค่าตำแหน่งให้สัมพันธ์กัน จอแสดงผล:ดิ้นช่วยให้แท็บวางติดกันในแถว และโดยทั่วไปตำแหน่งสัมพัทธ์จะทำหน้าที่เป็นขอบเขตหรือรั้วที่มีเนื้อหาของแท็บ

ณ จุดนี้ คุณจะเห็นสิ่งที่ดูเหมือนเป็นข้อความสี่ช่วงตึกพร้อมปุ่มตัวเลือกและเนื้อหาบางส่วน ต่อไปเราต้องหาวิธีแสดงบล็อกที่เลือกและซ่อนบล็อกอื่นๆ

บนคอนเทนเนอร์ .tab เราจะตั้งค่าการจัดสไตล์สำหรับป้ายกำกับ:
1. เส้นขอบทึบ 1px ในสีใดก็ได้ที่คุณต้องการ
2. Padding:5px, 10px – จะเพิ่มช่องว่างรอบๆ ข้อความป้ายกำกับ
3. Border-radius 10px, 10px, 0px, 0px – ซึ่งจะทำให้ป้ายกำกับดูเหมือนแท็บดั้งเดิมมากขึ้น

หากคุณตรวจสอบงานของคุณตอนนี้ คุณจะเห็นว่าป้ายกำกับมีปุ่มตัวเลือกแบบวงกลมอยู่ทางด้านซ้าย ดังนั้นมันจึงดูเหมือนแท็บดั้งเดิมมากกว่า แต่เพื่อให้ยังคงคุณสมบัติที่เลือกของปุ่ม เราจำเป็นต้องซ่อนส่วนที่เป็นวงกลมของปุ่มตัวเลือก

ในการเลือกปุ่มจริงๆ เราใช้ .tab [type='radio'] ในการซ่อน เราตั้งค่าการแสดงเป็นไม่มี

ต่อไป เราต้องจัดการกับเนื้อหาจริงเพื่อให้แสดงทีละแท็บเท่านั้น

เลือก div เนื้อหา แล้วตั้งค่าตำแหน่งเป็นค่าสัมบูรณ์ เมื่อตั้งค่าตำแหน่งที่แน่นอนแล้ว div สามารถตั้งค่าได้ทุกที่ภายในพาเรนต์ที่สัมพันธ์กัน เมื่อใช้ด้านบน ขวา ซ้าย และด้านล่าง คุณสามารถตั้งค่าเนื้อหาที่คุณต้องการให้อยู่ภายใน div ระดับบนสุดได้ ในกรณีนี้ ตั้งค่าคุณสมบัติด้านซ้ายและขวาเป็น 0 นอกจากนี้เรายังต้องการสร้างเส้นขอบและตั้งค่าสีพื้นหลังให้เป็นสีที่ไม่โปร่งใส

การตั้งค่าดัชนี z ของแท็บที่เลือกจะทำให้แผงของแท็บนั้นอยู่ด้านบน โดยเลือกปุ่มที่เลือกและเนื้อหา ในการดำเนินการนี้ เราใช้ [type='radio']:checked ~ label ~ .content “~” ระหว่างองค์ประกอบใน CSS บอกเราว่าเราต้องการคลาสเนื้อหาที่เกิดขึ้นหลังจากองค์ประกอบป้ายกำกับที่เกิดขึ้นหลังจากตรวจสอบปุ่มตัวเลือก

หากต้องการแสดงว่าแท็บใดเปิดใช้งานอยู่ ให้ตั้งค่า [type='radio']:checked ~ label เป็นสีพื้นหลังอื่น

ตอนนี้เมื่อผู้ใช้คลิกที่แท็บแต่ละแท็บ พวกเขาควรจะสามารถสลับจากแท็บหนึ่งไปอีกแท็บหนึ่งได้สำเร็จโดยไม่ต้องดูเนื้อหาของพาเนลอื่น นี่คือขั้นต่ำที่คุณต้องใช้เพื่อให้การนำทางแบบแท็บทำงาน ลองเล่นกับ CSS เพื่อเปลี่ยนสไตล์! การใช้งานการทำงานมีการเข้ารหัสด้านล่าง:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Tabs</title>
   <style>
       * {
           box-sizing: border-box;
       }
 
       body {
           font-family: 'Roboto';
       }
 
       .tabs {
           max-width: 700px;
           min-height: 100px;
           margin: 25px 0;
           width: 100%;
           display: flex;
           /* allows for tabs to be next to each other */
           position: relative;
           /* relative here contains the width of the content */
       }
 
       .tab label {
           padding: 5px 10px;
           border: 1px solid #ccc;
           cursor: pointer;
           border-radius: 10px 10px 0 0;
       }
 
       .tab [type='radio'] {
           display: none;
           /* this makes the radio buttons disappear - we are only keeping track if they are checked or not */
       }
 
       h3 {
           margin: 10px 40px;
       }
 
       ul {
           list-style-type: none;
       }
       .content {
           padding: 10px;
           border-radius: 0px 10px 10px 10px;
           position: absolute;
           left: 0;
           right: 0;
           background: white;
           border: 1px solid #ccc;
           /* the left and right at 0 help the tabs to overlap each other */
       }
 
       /* This allows the selected tab to be on top */
       [type='radio']:checked ~ label ~ .content {
           z-index: 1;
       }
 
       [type="radio"]:checked ~ label {
           background: lightgrey;
       }
       /* color scheme for tabs */
       [type='radio']:checked ~ #gryffindor {
           background: #ec9086;
           color: #241806;
       }
       [type='radio']:checked ~ #ravenclaw {
           background: #3054ca;
           color: #241806;
       }
 
       [type='radio']:checked ~ #slytherin {
           background: #089714;
           color: #252525;
       }
       [type='radio']:checked ~ #hufflepuff {
           background: #f0d695;
           color: #372e29;
       }
 
       [type='radio'] ~ #slytherin {
           background: #033807;
           color: #aaaaaa;
       }
       [type='radio'] ~ #hufflepuff {
           background: #f0c75e;
           color: #372e29;
       }
       [type='radio'] ~ #gryffindor {
           background: #9c1203;
           color: #e3a000;
       }
       [type='radio'] ~ #ravenclaw {
           background: #0e1a40;
           color: #946b2d;
       }
       .gryffindor {
           background: #9c1203;
           color: #e3a000;
       }
       .slytherin {
           background: #033807;
           color: #aaaaaa;
       }
       .hufflepuff {
           background: #f0c75e;
           color: #372e29;
       }
       .ravenclaw {
           background: #0e1a40;
           color: #946b2d;
       }
          
   </style>
</head>
<body>
   <div class="tabs">
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked/>
           <label id="gryffindor" for="tab-1">Gryffindor</label>
           <div class="content gryffindor">
               <h3>HP Chars in Gryffindor</h3>
               <ul class="gryffindor-students">
                   <li>Harry Potter</li>
                   <li>Hermione Grainger</li>
                   <li>Ron Weasley</li>
                   <li>Albus Dumbledore</li>
                   <li>Katie Bell</li>
                   <li>Neville Longbottom</li>
               </ul>
           </div>
       </div>
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1"/>
           <label id="slytherin" for="tab-2">Slytherin</label>
           <div class="content slytherin">
               <h3>HP Chars in Slytherin</h3>
               <ul class="slytherin-students">
                   <li>Draco Malfoy</li>
                   <li>Narcissa Black</li>
                   <li>Lucius Malfoy</li>
                   <li>Severus Snape</li>
                   <li>Tom Riddle</li>
                   <li>Dolores Umbridge</li>
               </ul>
           </div>
       </div>
       <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1"/>
           <label for="tab-3" id="ravenclaw">Ravenclaw</label>
           <div class="content ravenclaw">
               <h3>HP Chars in Ravenclaw</h3>
               <ul class="ravenclaw-students">
                   <li>Lisa Turpin</li>
                   <li>Luna Lovegood</li>
                   <li>Gilderoy Lockhart</li>
                   <li>Garrick Ollivander</li>
                   <li>Padma Patil</li>
                   <li>Sybil Trelawney</li>
               </ul>
           </div>
       </div>
       <div class="tab">
           <input type="radio" id="tab-4" name="tab-group-1">
           <label for="tab-4" id="hufflepuff">Hufflepuff</label>
 
           <div class="content hufflepuff">
               <h3>HP Chars in Hufflepuff</h3>
               <ul class="hufflepuff-students">
                   <li>Cedric Diggory</li>
                   <li>Newton Scamander</li>
                   <li>Nymphadora Tonks</li>
                   <li>Pomona Sprout</li>
                   <li>Susan Bones</li>
                   <li>Teddy Lupin</li>
               </ul>
           </div>
       </div>
   </div>
</body>
</html>