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

时间:2013-11-04 14:55:11

标签: javascript jquery html css

在此我点击照片时会显示目标div画廊。我想显示目标div,其中包含一些效果,如轻松或缓出或幻灯片效果等。这样看起来更具吸引力。最初是目标div库没有显示,因为在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;
    }

1 个答案:

答案 0 :(得分:0)

听起来这个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 =退出键。