jQuery幻灯片淡入淡出内容

我发现此代码将其放在其中一页中。但是我无法弄清楚如何让他们中的一个在网站上运行。直接链接到第一个项目现在可以工作。当我们进入网站时，我们怎样才能使第一个链接生效？jQuery幻灯片淡入淡出内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
     <title>Demo: jQuery Slide &amp; Fade Content</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
     <script type="text/javascript" src="slide-fade-content.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('.more').live('click',function(){ 
        var href = $(this).attr('href'); 
        if ($('#ajax').is(':visible')) { 
         $('#ajax').css('display','block').animate({height:'1px'}).empty(); 
        } 
        $('#ajax').css('display','block').animate({height:'200px'},function(){ 
         $('#ajax').html('<img class="loader" src="loader.gif" alt="">'); 
         $('#ajax').load('slide-fade-content.html #'+href,function(){ 
          $('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'}); 
         }); 
        }); 
        return true; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="wrap"> 
      <div id="demo"> 
       <table width="900" border="1"><tr><td width="150" valign="top"><ul> 
        <li><a class="more" href="#first-item">First Item</a></li> 
        <li><a class="more" href="#second-item">Second Item</a></li> 
        <li><a class="more" href="#third-item">Third Item</a></li> 
       </ul></td> 
       <td width="750"><div id="ajax"></div></td></tr></table> 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-02-13 Coderwannabe

其中一个“他们？”什么？ – 2013-02-13 15:15:57

– Coderwannabe2013-02-13 15:18:09

回答

我通常实现这一点的方法是手动触发上负载的情况下，如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
     <title>Demo: jQuery Slide &amp; Fade Content</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
     <script type="text/javascript" src="slide-fade-content.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('.more').live('click',function(){ 
        var href = $(this).attr('href'); 
        if ($('#ajax').is(':visible')) { 
         $('#ajax').css('display','block').animate({height:'1px'}).empty(); 
        } 
        $('#ajax').css('display','block').animate({height:'200px'},function(){ 
         $('#ajax').html('<img class="loader" src="loader.gif" alt="">'); 
         $('#ajax').load('slide-fade-content.html #'+href,function(){ 
          $('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'}); 
         }); 
        }); 
        return true; 
       }); 

      $('.more').first().click(); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="wrap"> 
      <div id="demo"> 
       <table width="900" border="1"><tr><td width="150" valign="top"><ul> 
        <li><a class="more" href="#first-item">First Item</a></li> 
        <li><a class="more" href="#second-item">Second Item</a></li> 
        <li><a class="more" href="#third-item">Third Item</a></li> 
       </ul></td> 
       <td width="750"><div id="ajax"></div></td></tr></table> 
      </div> 
     </div> 
    </body> 
</html>

该一个加法是$('.more').first().click();单击事件绑定之后加入。然后我拿第一个more链接和click吧。看到它住在这里http://jsfiddle.net/eEk2v/

来源

2013-02-13 15:18:13

+1之间的链接之一为工作解决方案 - 我会采取这一点，并进一步改进它通过打破“点击”代码到一个函数，然后调用doc.ready中的函数。除了语义上的不正确之外，手动触发点击只是感觉很奇怪！ – Raad 2013-02-13 15:25:12

语义错误？说明。我可以将它写成jquery longform作为'$（'。more'）。first（）。trigger（'click'）'，这也是触发jQuery事件处理程序的完全可接受的方式。这两种方法基本上都是触发jquery事件处理程序的相同形式，并且它非常常用。所以我不确定你不喜欢它。 – 2013-02-13 15:26:46

谢谢你以利它的作品非常好，也感谢您的解释 – Coderwannabe 2013-02-13 15:30:05

jQuery幻灯片淡入淡出内容

回答

相关问题