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