如何在某些按钮点击时在jsp中切换div
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在某些按钮点击时在jsp中切换div相关的知识,希望对你有一定的参考价值。
我的问题是我在两个不同的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>
答案
首先,没有像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>
另一答案
您在第一次点击后添加事件,删除onclick="showAndHideUl()"
并尝试这样做:
<script>
$(document).ready(function () {
$("#withcomponent").hide();
$("#preview").on("click", function () {
$("#withoutcomponent").hide();
$("#withoutcomponent").removeClass("component");
$("#withcomponent").show();
});
});
</script>
另一答案
@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>
以上是关于如何在某些按钮点击时在jsp中切换div的主要内容,如果未能解决你的问题,请参考以下文章