使用jQuery編寫選項卡是Web開發中常用的技術之一,而在選項卡的實現過程中,我們常常需要實現form表單的提交。下面是一段使用jQuery選項卡實現form提交的代碼:
上面的代碼中,我們首先需要初始化所有的選項卡及其對應的內容,然后通過綁定點擊事件實現選項卡的切換。在form提交時,我們需要獲取當前選項卡的ID,并將其存儲在一個hidden域中,再通過ajax提交表單數據到服務器端進行處理。需要注意的是,在表單提交事件中,我們需要返回false,以防止表單的默認提交行為。
$(document).ready(function() { // 隱藏所有tab內容 $(".tab-content").hide(); // 初始化第一個選項卡 $("#tab1").show(); // 綁定點擊事件 $("ul.tabs li").click(function() { // 獲取當前選項卡ID var currentTab = $(this).attr("id"); // 顯示當前選項卡內容 $("#" + currentTab + "-content").show(); // 隱藏其它選項卡內容 $(".tab-content").not("#" + currentTab + "-content").hide(); }); // 綁定form提交事件 $("form").submit(function() { // 獲取當前選項卡ID var currentTab = $("ul.tabs li.active").attr("id"); // 設置選項卡hidden域的值 $("input[name='tab']").val(currentTab); // 提交表單 $.ajax({ type: "POST", url: "submit.php", data: $("form").serialize(), success: function(response) { // 處理返回結果 alert(response); } }); return false; }); });
上面的代碼中,我們首先需要初始化所有的選項卡及其對應的內容,然后通過綁定點擊事件實現選項卡的切換。在form提交時,我們需要獲取當前選項卡的ID,并將其存儲在一個hidden域中,再通過ajax提交表單數據到服務器端進行處理。需要注意的是,在表單提交事件中,我們需要返回false,以防止表單的默認提交行為。
上一篇jquery選項卡界面