Javascript 我的可见性切换未按我希望的方式工作

HTML

<article class="col1 pad_left1">
    <div class="box1">
        <div class="box1_bot">
            <div class="box1_top">
                <div class="pad">
                     <h2>CLIENTS</h2>

                    <button style="background:url(images/box_top.jpg)  center top no-repeat; width:100%; text-align:center; padding:5px; color:white;" onclick="toggle_visibility('demo1');" id="C4M">Consultants4Manpower</button>
                    <div id="demo1" style: "visibility:hidden;">
                        <marquee behavior="scroll" direction="down">
                            <img src="images/CII logo.png" height="80px" width="80px" alt="">
                            <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
                            <br/>
                            <img src="images/Tie logo.png" height="80px" width="80px" alt="">
                        </marquee>
                    </div>
                    <hr/>
                    <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px;" onclick="toggle_visibility('demo2');" id="corporate">Corporate Training</button>
                    <div id="demo2" style: "visibility:hidden;">
                        <marquee behavior="scroll" direction="down">
                            <img src="images/CII logo.png" height="80px" width="80px" alt="">
                            <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
                            <br/>
                            <img src="images/Tie logo.png" height="80px" width="80px" alt="">
                        </marquee>
                    </div>
                    <hr/>
                    <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px;" onclick="toggle_visibility('demo3');" id="EPD">English & PD Training</button>
                    <div id="demo3" style: "visibility:hidden;">
                        <marquee behavior="scroll" direction="down">
                            <img src="images/CII logo.png" height="80px" width="80px" alt="">
                            <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
                            <br/>
                            <img src="images/Tie logo.png" height="80px" width="80px" alt="">
                        </marquee>
                    </div>
                    <hr/>
                    <button style="background:url(images/box_top.jpg) center top no-repeat; width:100%; text-align:center; padding:5px; font-color:white;" onclick="toggle_visibility('demo4');" id="P4E">Paterns4Education</button>
                    <div id="demo4" style: "visibility:hidden;">
                        <marquee behavior="scroll" direction="down">
                            <img src="images/CII logo.png" height="80px" width="80px" alt="">
                            <img src="images/Rotary logo.gif" height="80px" width="80px" alt="">
                            <br/>
                            <img src="images/Tie logo.png" height="80px" width="80px" alt="">
                        </marquee>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

我面临的问题是，当我加载页面时，所有四个部分都显示图像同时滚动。我想要的是，当我转到页面时，没有图像滚动可见。当我单击1时，说consultants4manpower，则只有该div下的图像变为可见向下滚动。此外，当我单击第2个时，上一个1变为不可见第二个是可见的。 请看链接：

---

有很多地方，您已经给出了：

style:"visibility: hidden;"

上面的代码是错误的

因为您已经用jQuery标记了它，所以我将使用jQuery做一些不同的事情

$（函数（）{
$（“.button”）.next（）.hide（）；
$（“.button”）。单击（函数（）{
$（“.button”）.next（）.slideUp（）；
$（this.next（）.slideToggle（）；
});
});
。按钮{
背景：url（images/box_top.jpg）中心顶部不重复；
宽度：100%；
文本对齐：居中；
填充物：5px；
颜色：白色；
}

客户
顾问4人力资源



企业培训



英语与PD培训



家长教育


有很多地方，您已经给出了：

style:"visibility: hidden;"

上面的代码是错误的

因为您已经用jQuery标记了它，所以我将使用jQuery做一些不同的事情


$（函数（）{
$（“.button”）.next（）.hide（）；
$（“.button”）。单击（函数（）{
$（“.button”）.next（）.slideUp（）；
$（this.next（）.slideToggle（）；
});
});
。按钮{
背景：url（images/box_top.jpg）中心顶部不重复；
宽度：100%；
文本对齐：居中；
填充物：5px；
颜色：白色；
}

客户
顾问4人力资源



企业培训



英语与PD培训



家长教育


有很多地方，您已经给出了：

style:"visibility: hidden;"

上面的代码是错误的

因为您已经用jQuery标记了它，所以我将使用jQuery做一些不同的事情


$（函数（）{
$（“.button”）.next（）.hide（）；
$（“.button”）。单击（函数（）{
$（“.button”）.next（）.slideUp（）；
$（this.next（）.slideToggle（）；
});
});
。按钮{
背景：url（images/box_top.jpg）中心顶部不重复；
宽度：100%；
文本对齐：居中；
填充物：5px；
颜色：白色；
}

客户
顾问4人力资源



企业培训



英语与PD培训



家长教育


有很多地方，您已经给出了：

style:"visibility: hidden;"

上面的代码是错误的

因为您已经用jQuery标记了它，所以我将使用jQuery做一些不同的事情


$（函数（）{
$（“.button”）.next（）.hide（）；
$（“.button”）。单击（函数（）{
$（“.button”）.next（）.slideUp（）；
$（this.next（）.slideToggle（）；
});
});
。按钮{
背景：url（images/box_top.jpg）中心顶部不重复；
宽度：100%；
文本对齐：居中；
填充物：5px；
颜色：白色；
}

客户
顾问4人力资源



企业培训



英语与PD培训



家长教育


错误：

<div id="demo3" style:"visibility:hidden;">



更好：

<div id="demo3" style="visibility:hidden;">



最佳：


#演示3{
可见性：隐藏；
}

即使在那里，你也在混合
可见性：隐藏带
显示：无这从来都不是一个好主意
错误：

<div id="demo3" style:"visibility:hidden;">



更好：

<div id="demo3" style="visibility:hidden;">



最佳：


#演示3{
可见性：隐藏；
}

即使在那里，你也在混合
可见性：隐藏带
显示：无这从来都不是一个好主意
错误：

<div id="demo3" style:"visibility:hidden;">



更好：

<div id="demo3" style="visibility:hidden;">



最佳：


#演示3{
可见性：隐藏；
}

即使在那里，你也在混合
可见性：隐藏带
显示：无wh