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>
JAVASCRIPT
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
我面临的问题是,当我加载页面时,所有四个部分都显示图像同时滚动。我想要的是当我去页面时没有图像滚动可见。当我点击1说,顾问4manpower然后只有那个div下面的图像变得可见向下滚动。当我点击第二个时,前一个1变得不可见,第二个变得可见。 看看链接: http://shubhamenterprises.education/about.html
答案 0 :(得分:3)
有很多地方,你已经给出了:
style:"visibility: hidden;"
以上代码错误。
由于你用jQuery标记了它,我会用jQuery做一些不同的事情。
$(function() {
$(".button").next().hide();
$(".button").click(function() {
$(".button").next().slideUp();
$(this).next().slideToggle();
});
});
&#13;
.button {
background: url(images/box_top.jpg) center top no-repeat;
width: 100%;
text-align: center;
padding: 5px;
color: white;
}
&#13;
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<article class="col1 pad_left1">
<div class="box1">
<div class="box1_bot">
<div class="box1_top">
<div class="pad">
<h2>CLIENTS</h2>
<button class="button">Consultants4Manpower</button>
<div id="demo1">
<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 class="button" id="corporate">Corporate Training</button>
<div id="demo2">
<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 class="button" 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 class="button" 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>
&#13;
答案 1 :(得分:0)
错误:
<div id="demo3" style="visibility:hidden;">
更好:
<style>
#demo3{
visibility:hidden;
}
</style>
最好的:
visibility:hidden;
虽然即使在那里你混合display:none;
和scrollTop
这也不是一个好主意