jquery怎么实现点击先隐藏再显示?(怎么用jquery实现,点击“继续”,隐藏当前div,显示下一个div,点击“返回”隐藏当前div,显示上一个div)
- 怎么用jquery实现,点击“继续”,隐藏当前div,显示下一个div,点击“返回”隐藏当前div,显示上一个div
- jquery怎么实现点击一个按钮控制一个div的显示和隐藏
- 怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.
- jquery怎么实现模块的隐藏显示
怎么用jquery实现,点击“继续”,隐藏当前div,显示下一个div,点击“返回”隐藏当前div,显示上一个div
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery_1_7.js"></script>
</head>
<body>
<div id="box">
<div style="display:block;">11111</div>
<div style="display:none;">2222</div>
<div style="display:none;">3333</div>
</div>
<input type="button" value="返回" onClick="ReturnPrev('#box');">
<input type="button" value="继续" onClick="ReturnNext('#box');">
</body>
</html>
<script type="text/javascript">
function ReturnNext(id){
var divLen = $(id).find("div").length;
var Thisdiv = 0;
for(var i=0;i<divLen;i++){if($(id).find("div").eq(i).css("display")!="none"){Thisdiv = i;};};
if(Thisdiv<divLen-1){$(id).find("div").hide().eq(Thisdiv+1).show();};
};
function ReturnPrev(id){
var divLen = $(id).find("div").length;
var Thisdiv = 0;
for(var i=0;i<divLen;i++){if($(id).find("div").eq(i).css("display")!="none"){Thisdiv = i;};};
if(Thisdiv!=0){$(id).find("div").hide().eq(Thisdiv-1).show();};
};
</script>
jquery怎么实现点击一个按钮控制一个div的显示和隐藏
试试 jquery的 toggle方法 或许对你有用
再附上例子吧,例子中的 jQuery库 你下载一下 引入文件就能看到效果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("div").toggle();
});
});
</script>
</head>
<body>
<buttonclass="btn1">Toggle</button>
<div>This is a paragraph.</div>
</body>
</html>
怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.
自己修改 jQuery 路径
<script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript">
$(function() {
$("#toggle").click(function() {
$(this).text($("#content").is(":hidden") ? "收起" : "展开");
$("#content").slideToggle();
});
});
</script> <a href="#" id="toggle">展开</a>
<div id="content" style="display: none;"><p>隐藏内容<p><p>隐藏内容<p></div>
jquery怎么实现模块的隐藏显示
$("模块的元素名或者id").css("display","none");
$("模块的元素名或者id").hide();