單選按鈕在wordpress中顯示和隱藏div

我想在wordpress中製作一個頁面（它是建立在WordPress管理界面中的自定義頁面工具內）。單選按鈕在wordpress中顯示和隱藏div

我想要的是3個單選按鈕。 2可見1隱藏。隱藏的應該被自動檢查，所以它顯示正確的div。（當我在css中使用z-index時可能不需要）

當用戶單擊其中一個複選框時，它應該隱藏另外兩個div並顯示正確的div（注意它們位於頁面上的相同位置）。

對於一些共鳴我不能讓這個在wordpress中工作。或者如果還有另外一種方式，我也可以採取同樣的方式。

CSS：

#apDiv3 { 
    position:absolute; 
    left:405px; 
    top:53px; 
    width:485px; 
    height:434px; 
    z-index:12; 
    background-color: #000; 
    color: #F00; 
} 

#apDiv10 { 
    position:absolute; 
    left:405px; 
    top:53px; 
    width:485px; 
    height:434px; 
    z-index:11; 
    background-color: #000; 
    color: #F00; 
} 

#apDiv11 { 
    position:absolute; 
    left:405px; 
    top:53px; 
    width:485px; 
    height:434px; 
    z-index:11; 
    background-color: #000; 
    color: #F00; 
} 


<script> 
$(document).ready(function(){ 
    $("input[name='payway']").click(function() { 

     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
}); 
</script>

HTML/PHP：

<p> 
     <input type="radio" name="payway" value="apDiv10" /> 
     pay2 

     <input type="radio" name="payway" value="apDiv3" checked="checked" style="display:none;"> 

    </p> 
    <p> 
     <input type="radio" name="payway" value="apDiv11" /> 
     Pay1 

    </p> 


<div id="apDiv3" class="desc"> 

This is the standard div that should be visable 

</div> 


<div id="apDiv10" class="desc"> 

Shows this div when user click on checkbox pay2 

</div> 


<div id="apDiv11" class="desc"> 

Shows when user click checkbox pay1 

</div>

來源

2013-10-21 Zara Rebecka Elisabeth Zentio

小提琴：http://jsfiddle.net/isherwood/9YXNE – isherwood

似乎工作。您可能會與jQuery和WP使用的任何內容發生衝突。控制檯中有任何錯誤？ – isherwood

也可能是一個CSS衝突 – Don

看來，當我看着head.php文件有一個腳本，dident工作，這讓我的腳本不工作所有。一旦我從頭部刪除腳本，它的工作。

謝謝大家！

來源

2013-10-21 23:58:50

單選按鈕在wordpress中顯示和隱藏div

回答

相關問題