Question

我需要让这个工作，我没有想法。我不能使用jquery，它需要纯粹的javascript / css。这有什么问题？

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1"><p>test 1</p></div>
<div id="id2" style="display: none"><p>test 2</p></div>

function toggle_visibility(id1, id2) {  
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e2.style.display == 'block') {                
  e.style.display = 'block';             
  e2.style.display = 'none';
}
else {
  e.style.display = 'none';            
  e2.style.display = 'block';
}              
}

Answer 1

您的代码示例唯一的问题是您没有将您的javascript包含在<script>标记中。

示例：

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1"><p>test 1</p></div>
<div id="id2" style="display: none"><p>test 2</p></div>

<script type="text/javascript">
    function toggle_visibility(id1, id2) {  
        var e = document.getElementById(id1);
        var e2 = document.getElementById(id2);
        if(e2.style.display == 'block') {                
            e.style.display = 'block';             
            e2.style.display = 'none';
        }
        else {
            e.style.display = 'none';            
            e2.style.display = 'block';
        }              
    } 
</script>

Answer 2

它只是工作！我在浏览器中尝试过它

<html>
    <head>
        <title></title>
    </head>
    <body>
        <a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
        <div id="id1"><p>test 1</p></div>
        <div id="id2" style="display: none"><p>test 2</p></div>

        <script type="text/javascript">
            function toggle_visibility(id1, id2) {  
                var e = document.getElementById(id1);
                var e2 = document.getElementById(id2);
                if(e2.style.display == 'block') {                
                    e.style.display = 'block';             
                    e2.style.display = 'none';
                 }
                 else {
                     e.style.display = 'none';            
                     e2.style.display = 'block';
                 }              
             }
         </script>
    </body>
</html>

Answer 3

内联样式是错误的形式，并且在语义上不正确。这应该通过CSS类更改来完成：

<a href="#id" onclick="toggle_visibility('id1', 'id2');">Change Payment Method</a>
<div id="id1" class="ClassThatShows"><p>test 1</p></div>
<div id="id2" class="ClassThatHides"><p>test 2</p></div>

<script type="text/javascript">
function toggle_visibility(hideMe, showMe) {  
    document.getElementById(hideMe).className = "ClassThatHides";
    document.getElementById(showMe).className = "ClassThatShows";
} 
</script>

无法在div之间切换可见性

3 个答案: