How to open css category tab

CSS Classified tabs can display classified content, which can be achieved through the following steps: create an HTML container, contain tab buttons and content, and set its ID attribute; set the CSS style of the tab and content; use JavaScript to listen Tab button click event, hides all tab content and displays the tab content corresponding to the clicked button.

CSS category tab opening method

CSS category tab is a method used to organize and display content. way, which allows users to switch between different categories of content by clicking on tabs. To open CSS category tabs, you need to follow these steps:

HTML Structure

1. Create a container element in HTML that contains the tab bar and tab content .
2. Create a <button></button> or <a></a> element for each tab and set its id attribute.
3. Create a <div> element for each tab content and set its <code>id attribute.

   The following is a sample HTML structure:

   <div class="tabs">
     <button id="tab1">选项卡 1</button>
     <button id="tab2">选项卡 2</button>
   
     <div id="content1">内容 1</div>
     <div id="content2">内容 2</div>
   </div>

   CSS style

   1. Set the style of the tab bar, including background color, Font size and alignment.
   2. Set the style of the tab button, including the style of the inactive and activated states.
   3. Set the style of the tab content, including background color, padding and border.

   Here are sample CSS styles:

   .tabs {
     display: flex;
     background-color: #f1f1f1;
     padding: 10px;
   }
   
   .tabs button {
     padding: 10px 20px;
     background-color: #ccc;
     border: none;
     cursor: pointer;
   }
   
   .tabs button.active {
     background-color: #f1f1f1;
   }
   
   .tabs div {
     display: none;
     padding: 20px;
   }
   
   .tabs div.active {
     display: block;
   }

   JavaScript Event Handling

   1. Use JavaScript to listen for the click event of the tab button.
   2. Hide all tab content when the user clicks the button.
   3. Display the content of the tab corresponding to the clicked button.

   The following is sample JavaScript event handling:

   const tabs = document.querySelector('.tabs');
   
   tabs.addEventListener('click', (e) => {
     if (e.target.tagName === 'BUTTON') {
       const tabId = e.target.id;
       const contentId = tabId.replace('tab', 'content');
   
       const buttons = tabs.querySelectorAll('button');
       buttons.forEach(btn => btn.classList.remove('active'));
   
       e.target.classList.add('active');
   
       const contents = tabs.querySelectorAll('div');
       contents.forEach(content => content.classList.remove('active'));
   
       const content = tabs.querySelector(`#${contentId}`);
       content.classList.add('active');
     }
   });