这对你们来说应该很容易,但我是这方面的真正初学者,需要简单地向我解释一下。我认为它也会帮助很多像我这样刚开始使用 jquery 的人......
我正在构建一个网站,该网站需要在其一个页面上有一个按钮,单击该按钮不仅会隐藏内容的 div(那里有很多解决方案),而且同时显示以前隐藏的内容 div .
我需要知道将执行此操作的 jquery 以及我需要环绕按钮以触发 jquery 的内容。
你能帮我吗?
谢谢,斯图。
在 ajax 调用成功时,您必须确定必须隐藏哪个 div 以及必须显示哪个 div。
$.ajax({
url: "Sevlet",
type: 'POST',
dataType: "json",
data:{"id":id},
contentType:"application/x-www-form-urlencoded",
success: function (data) {
$("#div1").hide();
$("#div2").show();
}
});
如果只关心两个 div 元素,jQuery.toggle()
支持两个事件处理函数:
$('button').toggle(function(){
$('div1').hide();
$('div2').show();
},function(){
$('div1').show();
$('div2').hide();
});
这应该可以确保一个 div 具有 css 属性display:none
,而另一个 div 没有(可见)。
首先,jQuery 只是一个用来做事的函数库。
所以像 hide() 和 show() 这样的 inbulit 函数可以用来做你想做的事情。我相信下面链接中关于 jQuery 的 hide/show/hide_show 文档很容易理解,你应该几乎没有问题。
http://api.jquery.com/hide/
http://api.jquery.com/show/
http://www.w3schools.com/jquery/jquery_hide_show.asp
但是,解决问题的另一种方法是使用jQuery 方法来切换 CSS 属性,这将导致 div 元素根据 css 属性显示或隐藏。我将为 height 属性演示它,但也可以使用其他几个属性,包括 max-height、left、right、top、bottom 等。
更改 CSS 中的属性,我可以看到 Div 是如何可见或隐藏的
例子:
<html>
<head>
<style>
.Div_I_Want_To_Show{
background: #ffe400;
width:100%;
height:0px;
overflow:auto;
}
</style>
</head>
<body>
<div class="Div_I_Want_To_Show">
<p>Some Random Text Here</p>
</div>
<button class="btn">Click to See Content</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(".btn").click(function(){
$('.Div_I_Want_To_Show').css('height','20em')
});
</script>
</body>
</html>
小提琴链接:https ://jsfiddle.net/L7pmarzh/
如果你想知道,你也可以为它制作动画,我想你会想要任何网站,因为简单的隐藏和显示效果对任何用户都没有吸引力。
希望这能解决你的问题:)