Question

我已经阅读了大约50篇文章，说明如何隐藏或显示div取决于点击操作。但是，我几乎尝试了所有方法，我的div不会隐藏或显示。似乎我错过了一些非常基本的东西。

<script>
    $(document).ready(function(){
        $('buynav').on('click',function(){
            document.getElementById('buycontent').style.display = 'block';
            document.getElementById('sellcontent').style.display = 'none';
        });
        $('sellnav').on('click',function(){
            document.getElementById('buycontent').style.display = 'none';
            document.getElementById('sellcontent').style.display = 'block';
        });

    });
    </script>

    <div id="contentContainer">
        <div id="documentSpace" style="left: 50%; top: 50px">
            <div id="headerPhoto" style="position:absolute;left:2.5%;width:95%; height:200px; background-image:url('../images/jpgHeader4.jpg'); background-size:cover;background-position:center; background-repeat:no-repeat;border-radius:9px; margin-top:17px;">
            </div>
            <div id="secondNav" style="position:absolute;left:2.5%;width:95%;height:75px;top:250px;text-align:center;vertical-align:middle;">
                <div id="buynav" class="buynav"><h2>Buy</h2></div>
                <div id="sellnav" class="sellnav"><h2>Sell</h2></div>
            </div>
            <div id="sellcontent" style="position:absolute;left:2.5%;width:95%;height:100%;top:350px;display:none;">
            </div>
            <div id="buycontent" style="position:absolute;left:2.5%;width:95%;height:100%;top:350px;display:block">
</div>
</div>
</div>

Answer 1

使用jQuerys show()和hide()：

<script>
    $(document).ready(function(){
        $('#buynav').on('click',function(){
            $('#buynav').show();
            $('#sellnav').hide();
        });
        $('#sellnav').on('click',function(){
            $('#buynav').hide();
            $('#sellnav').show();
        });

    });
    </script>

另一种选择是使用jQuery的toggle()，但它要求你在使用之前隐藏一个元素。

<script>
    $(document).ready(function(){
        $('#buynav').on('click',function(){
            $('#buynav').toggle();
            $('#sellnav').toggle();
        });
        $('#sellnav').on('click',function(){
            $('#buynav').toggle();
            $('#sellnav').toggle();
        });

    });
    </script>

我还在#和其他JS选择器中添加了$('#buynav')。而且，正如@mdesdev所指出，您可以将document.getElementById('buycontent')替换为$('#buynav')和$('#sellnav')，因为它们似乎在您的jQuery范围内“存在”。

Answer 2

我认为你忘了把＃换成你的身份。

 $('#buynav, #sellnav').on('click',function(){
     $('#buycontent').toggle();
     $('#sellcontent').toggle();
 });

希望它有效

显示或隐藏Div

2 个答案: