javascript - 如何在单击某些按钮时在jsp中切换div

Question

我的问题是我在两个不同的 div 下有两个 ul 列表。假设 showandhide.jsp 是需要加载某些操作的文件。我希望 div1 在页面加载时始终可见，而 div2 应该始终隐藏. 单击“单击我”时，div 应该切换。

代码如下

<button onclick="showAndHideUl()" id="preview">click me!</button>
<div1 id="withoutcomponent">
      // first ul list
</div>    
<div2 id="withcomponent"> 
      //second ul list
</div>

这就是我正在做的

<script> 
$(document).ready(function(){
    $("#withcomponent").hide();
    showAndHideUl = function() {
        $(function() {    
            $("#preview").on("click", function(){
                $("#withoutcomponent").hide();
                $("#withoutcomponent").removeClass("component");
                $("#withcomponent").show();
            });
        });
    }
});
</script>

Answer 1

首先，没有像 div1 或 div2 这样的 html 标签，它总是 <div> .其次，你的函数有点困惑，你应该确保你已经正确地包含了 jQuery 库，因为你在你的脚本中使用它。查看我为您制作的工作片段。使用 .toggle() 也是一个好习惯。而不是 .hide() .show()因为犯错的风险较小

$(document).ready(function(){
    $("#withcomponent").toggle();
    showAndHideUl = function()
    {
        $("#withoutcomponent").toggle();
        $("#withoutcomponent").toggleClass("component");
        $("#withcomponent").toggle();
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="showAndHideUl()" id="preview">click me!</button>
    <div id="withoutcomponent">
    // first ul list
    </div>

    <div id="withcomponent"> 
    //second ul list
    </div>