单选按钮在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

回答

相关问题