jquery隐藏并显示div

嗨，你不是很精通编码。我有＃内容淡出，并在单击.background按钮时。如何在按钮上显示文字以显示隐藏内容/节目内容？jquery隐藏并显示div

另外，当隐藏内容点击时，我还需要淡出另外两个div（.button-next，.button-prev）？

任何人都可以提供帮助吗？

<!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>

来源

2012-12-11 nuala bradley

是否有必要使用实现Java脚本，因为你可以很容易地做到这一点使用jQuery .......或者你可以为演示小提琴。 – w3uiguru

在你的问题中也提供HTML和CSS ..所以我们可以看到结构并找出我们必须为你服务的内容。 – w3uiguru

我修改了你řHTML把与ID到链接：#show_more

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：

$('#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(); 
});

第一行简单隐藏内容和按钮。你应该通过CSS或内联样式隐藏它们，并删除这行代码。

编辑：jsFiddle

来源

2012-12-11 11:59:05 Lian

嗨连接它工作。谢谢你的帮助。 –

我会使用而不是内联的事件处理程序登记添加事件侦听器：

var button = document.querySelector('.background-button'); 
button.addEventListener("click", function(){ 
    Show('content', this.children[0]); 
    return false; 
});

功能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"); 
    } 
}

这里是结果：http://jsfiddle.net/p3Qzk/

来源

2012-12-11 11:57:26

jquery隐藏并显示div

回答

相关问题