js高手救命啊~!

changling_wang 2009-12-06 03:05:39

需求:
有两个Button 一个是加，一个是减
有五个DIV

依次是:DIV1,DIV2,DIV3,DIV4,DIV5

页面第一次加载时
DIV1显示，其余隐藏

第一次单击加Button时，DIV2显示
第二次单击加Button时，DIV3显示
.
.
.
第四次单击加Button时，DIV5显示

第五次以后单击加Button时，不做任何操作~!

单击减Button时,依次隐藏，页面只剩DIV1时，在单击减Button时，不坐任何操作~!

...全文

67 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

Return门徒 2009-12-06

打赏
举报

谢谢了两位,一人20分吧，加个好友先，俺内蒙古地

我姓区不姓区 2009-12-06

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%-- 实验发现html/asp中很容易成功是因为后面的form是用name,而aspx中form要用id--%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>用javascript验证输入框空白</title>



    <script type="text/javascript">

        var index = 1;

        function add() {

            if (index < 5) {

                index++;

                show(index);

            }

        }

        function minus() {

            if (index > 1) {

                index--;

                show(index);

            }

        }



        function show(j) {

            for (var i = 1; i <= 5; i++) {

                document.getElementById("div" + i).style.display = "none";

            }

            document.getElementById("div" + j).style.display = "block";

        }

        

    </script>



</head>

<body>

    <form id="form1" method="post" action="Login.aspx" onsubmit="return check_Null()">

    <div id="div1" style="background-color: Red; width: 100px; height: 100px;">

        div1</div>

    <div id="div2" style="background-color: Blue; width: 100px; height: 100px; display: none;">

        div2</div>

    <div id="div3" style="background-color: Green; width: 100px; height: 100px; display: none;">

        div3</div>

    <div id="div4" style="background-color: Black; width: 100px; height: 100px; display: none;">

        div4</div>

    <div id="div5" style="background-color: Yellow; width: 100px; height: 100px; display: none;">

        div5</div>

    <input type="button" value="加" onclick="add()" />

    <input type="button" value="减" onclick="minus()" />

    </form>

</body>

</html>

SmallWhiter 2009-12-06

打赏
举报

页面第一次加载时
DIV1显示，其余隐藏: div2-5加上属性: style="display:none"

第一次单击加Button时，DIV2显示
第二次单击加Button时，DIV3显示
.
.
.
第四次单击加Button时，DIV5显示
:设个全局变量 var num=2;
button加的单击事件: function onClickButtonJia()
{
if(num<5)
{
document.getElementById("div"+num).style.display="block";
document.getElementById("div"+num-1).style.display="none";
num+=1;
}
}

减Button也是同样的写好了调试一下就可以了