[英]Jquery hide and show div
Hi there not very proficient in coding. 您好,不是很精通编码。 I have #content fading out and in when .background-button clicked.
单击.background-button时,我的#content逐渐淡出。 How do I get text on button to display hide content / show content?
如何在按钮上显示隐藏内容/显示内容?
Also I need to fade out another two divs (.button-next, .button-prev) when hide content clicked? 当隐藏内容单击时,我还需要淡出另外两个div(.button-next,.button-prev)吗?
Anyone that can help? 有人可以帮忙吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var openingdelay = 200; // Delay before fade in initiated (default is 200)
var closingdelay = 100; // Delay before fade out initiated (default is 100)
var openingspeed = 25; // Speed of fade in (default is 25)
var closingspeed = 15; // Speed of fade out (default is 15)
function Show(elementid) {
ele = document.getElementById(elementid);
if(ele.style.display == 'none') {
ele.style.opacity = 0;
ele.style.filter = 'alpha(opacity=0)';
ele.style.display = '';
valueop = 1;
setTimeout("fadeIn()", openingdelay);
}
else {
valueop = 9;
setTimeout("fadeOut()", closingdelay);
}
}
function fadeOut() {
if(valueop < 1) {
ele.style.display = 'none';
return false;
}
ele.style.opacity = valueop/10;
ele.style.filter = 'alpha(opacity='+(valueop*10)+')';
valueop = valueop - 1;
setTimeout("fadeOut()", closingspeed);
}
function fadeIn() {
if(valueop > 10) {
return false;
}
ele.style.opacity = valueop/10;
ele.style.filter = 'alpha(opacity='+(valueop*10)+')';
valueop = valueop + 1;
setTimeout("fadeIn()", openingspeed);
}
</script>
<style type="text/css">
.layer1 {
margin: 0;
padding: 0;
width: 500px;
}
.background-button {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
float:right;
}
#content {
padding: 5px 10px;
background-color:#000;
float:left; width:400px; height:600px; color:#FFF
}
</style>
</head>
<body>
<div id="content" >Hello! This will remain hidden until the link is clicked.</div>
<div class="background-button"><a href="#" onClick="Show('content'); return false;">Click Me To Reveal More</a></div>
<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:100px; height:50px; width:100px;" id="button-next">next</div>
<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:200px; height:50px; width:100px;" id="button-prev">prev</div>
</body>
</html>
I would add the event listener using registration instead of an inline event handler: 我将使用注册而不是嵌入式事件处理程序来添加事件侦听器:
var button = document.querySelector('.background-button');
button.addEventListener("click", function(){
Show('content', this.children[0]);
return false;
});
The function Show
would correspondingly have to be modified to: Show
函数将相应地修改为:
function Show(elementid, link) {
ele = document.getElementById(elementid);
if (ele.style.display == 'none') {
ele.style.opacity = 0;
ele.style.filter = 'alpha(opacity=0)';
ele.style.display = '';
valueop = 1;
setTimeout("fadeIn()", openingdelay);
}
else {
valueop = 9;
setTimeout("fadeOut()", closingdelay);
}
if(link.getAttribute('data-hidden') == "hidden"){
link.innerHTML = "Click Me To Hide Stuff";
link.removeAttribute("data-hidden");
}else{
link.innerHTML = "Click Me To Reveal More";
link.setAttribute("data-hidden", "hidden");
}
}
Here are the results: http://jsfiddle.net/p3Qzk/ 结果如下: http : //jsfiddle.net/p3Qzk/
I modified your html to put and ID to the link: #show_more
我修改了您的HTML,以放置ID和链接ID:
#show_more
HTML: HTML:
<div id="content" >Hello! This will remain hidden until the link is clicked.</div>
<div class="background-button"><a id="show_more" href="#">Click Me To Reveal More</a></div>
<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:100px; height:50px; width:100px;" id="button-next">next</div>
<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:200px; height:50px; width:100px;" id="button-prev">prev</div>
jQuery: jQuery的:
$('#content, #button-next, #button-prev').hide();
$('#show_more').click(function(e) {
e.preventDefault(); // disable default <a> behavior
if ($('#content').is(':visible')) {
$('#show_more').text('Show Content');
} else {
$('#show_more').text('Hide Content');
}
$('#content, #button-next, #button-prev').fadeToggle();
});
The first line simply hides the content and buttons. 第一行只是隐藏内容和按钮。 You should hide them via CSS or inline styles and remove this line of code.
您应该通过CSS或内联样式隐藏它们,并删除此行代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.