CSS 카테고리 탭은 다음 단계에 따라 카테고리 콘텐츠를 표시할 수 있습니다. 탭 버튼과 콘텐츠가 포함된 HTML 컨테이너를 만들고 해당 ID 속성을 설정합니다. 탭과 콘텐츠의 CSS 스타일을 설정합니다. 탭 버튼 클릭 수신 모든 탭 내용을 숨기고 클릭한 버튼에 해당하는 탭 내용을 표시하는 이벤트입니다.
CSS 카테고리 탭을 여는 방법
CSS 카테고리 탭은 콘텐츠를 구성하고 표시하는 방법으로, 사용자가 탭을 클릭하여 다양한 콘텐츠 카테고리 간에 전환할 수 있습니다. CSS 카테고리 탭을 열려면 다음 단계를 따라야 합니다.
HTML 구조
<button></button>
또는 <a></a>
요소를 만들고 id
속성을 설정하세요. <button>
或 <a>
元素,并设置其 id
属性。<div>
元素,并设置其 id
<div>
요소를 만들고 id
속성을 설정하세요. <code class="html"><div class="tabs"> <button id="tab1">选项卡 1</button> <button id="tab2">选项卡 2</button> <div id="content1">内容 1</div> <div id="content2">内容 2</div> </div></code>
<code class="css">.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; }</code>
<code class="javascript">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'); } });</code>
위 내용은 CSS 카테고리 탭을 여는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!