我的visibility_toggle没有按我想要的方式工作
My visibility_toggle is not working as i want it to
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
有很多
地方,你已经给出了:
style:"visibility: hidden;"
上面的代码是错误的。
既然你已经用jQuery标记了它,我会用jQuery做一些不同的事情。
$(function() {
$(".button").next().hide();
$(".button").click(function() {
$(".button").next().slideUp();
$(this).next().slideToggle();
});
});
.button {
background: url(images/box_top.jpg) center top no-repeat;
width: 100%;
text-align: center;
padding: 5px;
color: white;
}
<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>
错误:
<div id="demo3" style:"visibility:hidden;">
更好:
<div id="demo3" style="visibility:hidden;">
最好:
<style>
#demo3{
visibility:hidden;
}
</style>
尽管即使在那里,您也会visibility:hidden;
与display:none;
混合在一起,这绝不是一个好主意
相关文章:
- 在多行图表中,在每一行的末尾,我想要一个小圆圈和使用d3.js的端点值
- 我想要相同的函数以两种方式反应
- 如何在javascript中创建一个空的2d数组?下面是我想要创建的一个示例
- 如何用javascript发送多个文件没有jQuery我想要每个文件一个进度条
- 我想要一个类似于网站 https://onlycoin.com/ 的jQuery鼠标滚动动画效果
- 我想要“鼠标滚轮事件延迟”
- 如何格式化我返回的url,使其符合我想要的路由
- 如何使用facet指定我想要的字段
- json_encode($myVar);正在给出地图,我想要一个字符串数组
- Javascript:我可以't找到正确的方式来表达布尔“;如果“;以得到我想要的结果
- 指令没有按照我想要的方式行事 - AngularJS
- j查询下拉菜单.页面标记无法正常工作 - 或者我想要它的方式
- 为什么这个正则表达式不能按照我想要的方式工作
- .filter() 中的函数没有按我想要的方式工作
- html5本地存储没有按我想要的方式工作
- 没有按照我想要的方式获得json
- 我的visibility_toggle没有按我想要的方式工作
- 写一个coffeescript函数,将json数组转换成我想要的格式,这是一种简洁的方式
- 为什么setTimeout动画在javascript不工作的方式,我想要它
- jQuery克隆方法没有按我想要的方式工作