如何在某些按钮单击时切换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>

Answer 2

您在第一次单击后添加事件，删除onclick="showAndHideUl()"并尝试以下操作：

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

Answer 3

正如@Striped 所说，您的标记中有一些错误。 你的问题应该更清楚。

我希望你想做如下。

 $("#preview").on('click', function(e) { $('#withoutcomponent, #withcomponent').toggleClass('display'); });

 * { padding: 0; margin: 0; } body { padding: 10px; } div { width: 300px; background: #fdb839; padding: 20px; } ul { list-style: none; font-size: 20px; } li { padding: 5px 10px; } button { width: 120px; height: 30px; margin-bottom: 20px; } .withoutcomponent, .withcomponent { display: none; } .display { display: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="preview">click me!</button> <div id="withoutcomponent" class="withoutcomponent display"> <h1>First Div</h1> <ul> <li>First Ul: sone content 1</li> <li>First Ul: sone content 2</li> <li>First Ul: sone content 3</li> </ul> </div> <div id="withcomponent" class="withcomponent"> <h1>Second Div</h1> <ul> <li>Second Ul: sone content 1</li> <li>Second Ul: sone content 2</li> <li>Second Ul: sone content 3</li> </ul> </div>