基礎 - 開關基礎

要建立開關，你需要將.switch類新增到一個元素。
在開關中新增<input type = "checkbox">，並帶有.switch-input類。
接下來，你需要建立一個帶有.switch-paddle類的<label>。
為<input>提供一個唯一的 ID，並使用for屬性將<label>指向<input>，這使得開關可點選。
在開關標籤中使用.show-for-sr類，這個類僅向螢幕閱讀器顯示文字，以在視覺上隱藏文字。

示例

以下示例演示瞭如何在 Foundation 中使用switch。

<html>
   <head>
      <title>Switch</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <div class = "switch">
         <input class = "switch-input" id = "demoSwitch" type = "checkbox" name = "demoSwitch">
         <label class = "switch-paddle" for = "demoSwitch">
            <span class = "show-for-sr">Switch</span>
         </label>
      </div>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，瞭解上面給出的程式碼如何運作 −

將上面給出的 html 程式碼儲存到switch_basics.html檔案。
在瀏覽器中開啟這個 HTML 檔案，如下圖所示，顯示輸出。

foundation_basic_controls.htm

列印頁面

基礎 - 開關基礎

說明

示例

輸出