在此,当我单击照片时,目标 div 画廊会显示出来。我想显示目标 div,并带有一些效果,如缓入或缓出或幻灯片效果等,以便它看起来更有吸引力。最初是目标div gallery 没有显示,因为在 css 中有 display:none for gallery。我也为此尝试了过渡属性,但它不起作用。所以请帮助我解决这个问题。
<div>
<ul id="nav">
<li><a href="#main">Home</a></li>
<li id="gallary"><a href="#gallery">Photos</a></li>
</ul>
</div>
<div id="gallery">
<h3 style="font-family:'Comic Sans MS';color:white;font-size:25px;text-align:center;font-weight:bold;">GALLARY</h3>
<div id="gallary_images"><a href="slide1.jpg" data-lightbox="roadtrip"><img src="slide1.jpg"/></a></div>
<div id="gallary_images"><a href="slide3.jpg" data-lightbox="roadtrip"><img src="slide3.jpg"/></a></div>
<div id="gallary_images"><a href="slide4.jpg" data-lightbox="roadtrip"><img src="slide4.jpg"/></a></div>
<div id="gallary_images"><a href="slide5.jpg" data-lightbox="roadtrip"><img src="slide5.jpg"/></a></div>
<div id="gallary_images"><a href="slide1.jpg" data-lightbox="roadtrip"><img src="slide1.jpg"/></a></div>
<div id="gallary_images"><a href="slide5.jpg" data-lightbox="roadtrip"><img src="slide5.jpg"/></a></div>
</div>
CSS 是
#gallery:target
{
display:block;
}
#gallery
{
border:solid black thin;
display:none;
position:absolute;
}
最佳答案
听起来这个 jQuery 函数很适合您的需要:
上面的页面有一个例子,我已经修改了,你可以试试:
$( "#gallary" ).click(function() {
$( "#gallery" ).fadeIn( "slow", function() {
// Animation complete
});
});
我假设您想点击 <li id="gallary"><a href="#gallery">Photos</a></li>
使内容出现。
如果我可以添加一些进一步的评论 - 尝试重命名您的元素 ID 以使其更具描述性,并注意您同时使用了 'gallary' 和 'gallery' 拼写,这使得它难以阅读。此外,单个 id 应该是唯一的,而同一个类可以多次使用。
最后 - 不要使用 comic sans! :D
编辑:我添加了您在退格时关闭的额外要求:
$('html').keyup(function(e){if(e.keyCode == 8)
$( "#gallery" ).fadeOut( "slow", function() {
// Animation complete
});})
正如我在评论中提到的,8 = 退格键,36 = 转义键。
关于javascript - 在不同的链接上显示不同的文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19770415/