1. 首页 > 科技

jquery怎么实现点击先隐藏再显示?(怎么用jquery实现,点击“继续”,隐藏当前div,显示下一个div,点击“返回”隐藏当前div,显示上一个div)

jquery怎么实现点击先隐藏再显示?(怎么用jquery实现,点击“继续”,隐藏当前div,显示下一个div,点击“返回”隐藏当前div,显示上一个div)

怎么用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();