選項卡是Web頁面中常用的一種展示方式,jQuery提供了一種簡單易用的選項卡插件,可以幫助我們快速實現選項卡效果。
// HTML結構 <div class="tab"> <ul class="tab-nav"> <li class="active"><a href="#tab-1">選項卡1</a></li> <li><a href="#tab-2">選項卡2</a></li> <li><a href="#tab-3">選項卡3</a></li> </ul> <div class="tab-content"> <div id="tab-1" class="active">選項卡1的內容</div> <div id="tab-2">選項卡2的內容</div> <div id="tab-3">選項卡3的內容</div> </div> </div> // CSS樣式 .tab { border: 1px solid #ddd; border-radius: 5px; padding: 10px; } .tab-nav li { display: inline-block; margin-right: 10px; } .tab-nav li.active a { color: #ff6600; } .tab-content div { display: none; } .tab-content div.active { display: block; } // jQuery代碼 $('.tab-nav li').on('click', function() { // 切換選中狀態 $(this).addClass('active').siblings().removeClass('active'); // 切換內容顯示 var tabId = $(this).find('a').attr('href'); $(tabId).addClass('active').siblings().removeClass('active'); });
以上就是一個簡單的選項卡示例,其中使用了jQuery的事件綁定和DOM操作方法,實現了點擊選項卡切換內容的效果。
下一篇java 和c一起學