在不同的链接上显示不同的文本

display different text on different links

本文关键字：文本 显示 链接      更新时间：2023-09-26

当我点击照片时，会显示目标div图库。我想显示带有一些效果的目标div，例如缓入或缓出或滑动效果等，以便它看起来更具吸引力。最初，目标div 图库不会显示，因为在 css 中，图库有 display：none 。我也为此尝试了过渡属性，但它不起作用。所以请帮我解决这个问题。

<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函数适合你的需求：

http://api.jquery.com/fadeIn/

上面的页面上有一个示例，我已经修改了供您尝试：

$( "#gallary" ).click(function() {
  $( "#gallery" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

我假设您想单击<li id="gallary"><a href="#gallery">Photos</a></li>以显示 的内容。

如果我可以添加一些进一步的评论 - 尝试重命名您的元素 ID 以更具描述性，并注意您同时使用了"gallary"和"gallery"拼写，这使得它难以阅读。此外，单个 id 应该是唯一的，而同一个类可以多次使用。

最后 - 不要使用漫画sans！ :D

编辑：我添加了关闭退格键的额外要求：

$('html').keyup(function(e){if(e.keyCode == 8)
  $( "#gallery" ).fadeOut( "slow", function() {
    // Animation complete
  });})

正如我在评论中提到的 8 = 退格键，36 = 转义键。

相关文章：