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

相關問題