html複選框切換活動/不活動標籤不起作用

我正在使用基礎zurb的開關類，我使用他們網站的示例，但不活動/活動設置的內部標籤不起作用。代碼如下：html複選框切換活動/不活動標籤不起作用

<p>Above/Below</p> 
<div class="switch"> 
    <input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch"> 
    <label class="switch-paddle" for="Above/Below"> 
     <span class="switch-active" aria-hidden="true">A</span> 
     <span class="switch-inactive" aria-hidden="true">B</span> 
    </label> 
</div>

交換機的各個活動/非活動設置上的A和B未顯示。

來源

2016-01-14 Steven

難道是因爲你用它測試的瀏覽器？ – drzounds

我正在使用safari。它從來沒有爲任何PHP/HTML或路邊基金會類工作。但也許這可能是？我會檢查另一個瀏覽器。 – Steven

nope它無法在chrome上工作：/ – Steven

嘗試這樣：

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" /> 
</head> 
<body> 

<p>Above/Below</p> 
<div class="switch"> 
    <input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch"> 
    <label class="switch-paddle" for="Above/Below"> 
     <span class="switch-active" aria-hidden="true">A</span> 
     <span class="switch-inactive" aria-hidden="true">B</span> 
    </label> 
</div> 

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/js/foundation.accordion.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
     $(document).foundation(); 
    }); 
</script> 
</body> 
</html>

來源

2016-01-15 08:33:54

html複選框切換活動/不活動標籤不起作用

回答

相關問題