This is the fifth day of my participation in the More text Challenge. For details, see more text Challenge

Above from B station CodingStartup at least class pure CSS to achieve TAB effect. The fourth day of learning with the teacher

Implementation effect

When switching, switch to the corresponding TAB

The implementation code

Element structure

<body>
  <div class="containe md:w-6/12 my-0 mx-auto pt-3 ">
    <input type="radio" name="tab" id="iphone-12" checked class="hidden">
    <input type="radio" name="tab" id="iphone-13"  class="hidden">
    <input type="radio" name="tab" id="iphone-14" class="hidden">
    <div class="my-4 nav">
      <label for="iphone-12">
        <span class="py-2 px-5 rounded-full inline-block">iphone 12 Pro</span>
      </label>
      <label for="iphone-13">
        <span class="py-2 px-5 rounded-full inline-block">iphone 13</span>
      </label>
      <label for="iphone-14">
        <span class="py-2 px-5 rounded-full inline-block">iphone 14</span>
      </label>
    </div>
    <div class="flex flex-row justify-center border hidden rounded-lg px-6 box-border tab-iphone-12">
      <div class="w-3/5 flex flex-col justify-center">
        <h2 class="font-bold"  >IPhone 12 Pro</h2>
        <p class="mt-3">The iPhone is carefully designed to protect your information. Face ID data will only be kept on your iPhone, not backed up to iCloud or anywhere else. IOS will tell you the privacy policy of each app before you download it. When using Apple Pay, your credit card number will never be disclosed to merchants. The list goes on and on.</p>
        <button class="mt-3 bg-black text-white text-center w-4/12 h-10 rounded-full hover:bg-red-700">shop now</button>
      </div>
      <img src="./demo.jpg" alt="" class="w-2/5 h-full">
    </div>
    <div class="flex flex-row justify-center border hidden rounded-lg px-6 box-border tab-iphone-13">
      <div class="w-3/5 flex flex-col justify-center">
        <h2 class="font-bold"  >IPhone 13 Pro</h2>
        <p class="mt-3">The iPhone is carefully designed to protect your information. Face ID data will only be kept on your iPhone, not backed up to iCloud or anywhere else. IOS will tell you the privacy policy of each app before you download it. When using Apple Pay, your credit card number will never be disclosed to merchants. The list goes on and on.</p>
        <button class="mt-3 bg-black text-white text-center w-4/12 h-10 rounded-full hover:bg-red-700">shop now</button>
      </div>
      <img src="./demo.jpg" alt="" class="w-2/5 h-full">
    </div>
    <div class="flex flex-row justify-center border hidden rounded-lg px-6 box-border tab-iphone-14" >
      <div class="w-3/5 flex flex-col justify-center">
        <h2 class="font-bold"  >IPhone 14 Pro</h2>
        <p class="mt-3">The iPhone is carefully designed to protect your information. Face ID data will only be kept on your iPhone, not backed up to iCloud or anywhere else. IOS will tell you the privacy policy of each app before you download it. When using Apple Pay, your credit card number will never be disclosed to merchants. The list goes on and on.</p>
        <button class="mt-3 bg-black text-white text-center w-4/12 h-10 rounded-full hover:bg-red-700">shop now</button>
      </div>
      <img src="./demo.jpg" alt="" class="w-2/5 h-full">
    </div>
  </div>
</body>
Copy the code

Style structure

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<style>
#iphone-12:checked ~ .tab-iphone-12{
	display: flex;
}
#iphone-13:checked ~ .tab-iphone-13{
	display: flex;
}
#iphone-14:checked ~ .tab-iphone-14{
	display: flex;
}
</style>
Copy the code
  • Mainly strengthtailwindFramework to implement the design of the style
  • :checked: whenradioThe style after it is selected
  • ~: represents an element of its sibling
  • <lable>When the user selects this TAB, the browser automatically shifts its focus to the form control associated with the TAB