jQuery是一種JavaScript庫,它可以方便地操作文檔對象模型(DOM)。
jQuery選項卡插件是一種常用的網頁組件,它可以讓用戶在多個相關信息之間輕松切換。
$(document).ready(function(){ // 給選項卡列表項添加點擊事件 $("#tabs li").click(function(){ // 隱藏所有選項卡面板 $("#tab-contents div").hide(); // 顯示當前選項卡面板 var selected = $(this).find("a").attr("href"); $(selected).show(); // 高亮當前選項卡列表項 $("#tabs li").removeClass("active"); $(this).addClass("active"); }); });
以上是一個簡單的jQuery選項卡示例:
- 選項卡列表使用ul和li標簽構建。
- 每個選項卡面板使用div標簽構建,并設置不同的ID以便通過jQuery選擇器進行操作。
- 使用CSS樣式設置選項卡列表和面板的外觀。
- 點擊選項卡列表項時,使用jQuery切換面板,并高亮當前列表項。
這只是一個最簡單的jQuery選項卡示例,您可以根據自己的需求擴展它。例如,您可以添加動畫效果、循環選項卡、使用Ajax加載面板內容等。