用jQuery写的tab切换，点击保存-获取各tab页填写的数据

Carrey941

已于 2023-12-07 17:09:46 修改

阅读量449

点赞数 10

文章标签： jquery 前端 javascript html css

于 2023-12-07 17:03:41 首次发布

本文链接：https://blog.csdn.net/weixin_67339987/article/details/134860061

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Tab切换保存各页数据</title>
  <style>
    .tab-content {
      display: none;
    }
    .active {
      display: block;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn" data-tab="tab1">Tab 1</button>
    <button class="tab-btn" data-tab="tab2">Tab 2</button>
    <button class="tab-btn" data-tab="tab3">Tab 3</button>
  </div>

  <div id="tab1" class="tab-content active">
    <!-- Tab 1 Content -->
    <input type="text" id="datatab1" placeholder="Enter data for Tab 1">
  </div>

  <div id="tab2" class="tab-content">
    <!-- Tab 2 Content -->
    <input type="text" id="datatab2" placeholder="Enter data for Tab 2">
  </div>

  <div id="tab3" class="tab-content">
    <!-- Tab 3 Content -->
    <input type="text" id="datatab3" placeholder="Enter data for Tab 3">
  </div>

  <button id="saveBtn">Save Data</button>

  <script>
    $(document).ready(function() {
		//点击切换tab页
      $(".tab-btn").click(function() {
        var tabId = $(this).data("tab");
        $(".tab-content").removeClass("active");
        $("#" + tabId).addClass("active");
      });
      $("#saveBtn").click(function() {
		//点击保存循环获取每个tab页中input填写的数据value值
        var tabData = {};
        $(".tab-content").each(function() {
		//获取tab页id
          var tabId = $(this).attr("id"); 

		  //拼接的每个input框，获取对应的value值
          var inputData = $("#data" + tabId).val(); 
		  console.log(inputData);
          tabData[tabId] = inputData;
        });
		//三个tab页输入框的值拼成的一个对象
        console.log(tabData);
      });
    });
  </script>

</body>
</html>