CSS樣式點擊切換界面是網頁設計中常見的功能,可以為用戶帶來很好的交互體驗。以下是使用CSS實現點擊切換界面的代碼示例。
<!-- HTML 代碼 --> <div class="container"> <div class="tab active-tab">選項卡1</div> <div class="tab">選項卡2</div> <div class="tab">選項卡3</div> </div> <!-- CSS 代碼 --> .container { display: flex; } .tab { width: 100px; height: 50px; border: 1px solid #ccc; text-align: center; line-height: 50px; cursor: pointer; } .active-tab { background-color: #ccc; } <!-- JavaScript 代碼 --> let tabs = document.querySelectorAll('.tab'); tabs.forEach(tab => { tab.addEventListener('click', (e) => { tabs.forEach(tab => tab.classList.remove('active-tab')); e.target.classList.add('active-tab'); }); });
在上面的代碼中,我們使用了HTML和CSS來創建選項卡容器和單個的選項卡,同時使用JavaScript為選項卡添加了點擊事件。當用戶點擊某個選項卡時,JavaScript會為該選項卡添加一個 active-tab 類,同時移除其他選項卡的 active-tab 類,實現了點擊切換界面的效果。
以上是CSS樣式點擊切換界面的示例代碼,希望對你有所幫助。
上一篇css樣式是什么6