2011-10-30 53 views
0

主頁是home.jsp,它包含4個選項卡。我使用JSP include src在標籤2中顯示圖像滑塊。問題是幻燈片沒有按預期時單擊標籤2。圖像滑塊JSP使用document.ready。這個JSP在單獨查看時或在主頁中將Tab選項指定爲1而不是2時起作用。我已經嘗試了許多選項,如document.window,document.ready。以下是代碼。document.ready當您有一個標籤頁時src

$(document).ready(function() 
    { 
     //Set Default State of each portfolio piece 
     $(".paging").show(); 
     $(".paging a:first").addClass("active"); 

    //Get size of images, how many there are, then determin the size of the image reel. 
    var imageWidth = $(".window_spot").width(); 
    var imageSum = $(".image_reel img").size(); 
    var imageReelWidth = imageWidth * imageSum; 


    //Adjust the image reel to its new size 
    $(".image_reel").css({'width' : imageReelWidth}); 

    //Paging + Slider Function 
    rotate = function(){  
     var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
     var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide 

     $(".paging a").removeClass('active'); //Remove all active class 
     $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

     //Slider Animation 
     $(".image_reel").animate({ 
      left: -image_reelPosition 
     }, 500); 

    }; 

    //Rotation + Timing Event 
    rotateSwitch = function(){  
     play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
      $active = $('.paging a.active').next(); 
      if ($active.length === 0) { //If paging reaches the end... 
       $active = $('.paging a:first'); //go back to first 
      } 
      rotate(); //Trigger the paging and slider function 
     }, 7000); //Timer speed in milliseconds (3 seconds) 
    }; 

    rotateSwitch(); //Run function on launch 

    //On Hover 
    $(".image_reel a").hover(function() { 
     clearInterval(play); //Stop the rotation 
    }, function() { 
     rotateSwitch(); //Resume rotation 
    }); 

    //On Click 
    $(".paging a").click(function() { 
     $active = $(this); //Activate the clicked paging 
     //Reset Timer 
     clearInterval(play); //Stop the rotation 
     rotate(); //Trigger rotation immediately 
     rotateSwitch(); // Resume rotation 
     return false; //Prevent browser jump to link anchor 
    }); 

}); 
+0

您的標籤是否爲新頁面(從頭開始載入一個全新的URL)還是僅僅是同一內容的不同視圖?只加載一個新的URL會導致一個新的'document.ready()'被觸發。 – jfriend00

+0

每個選項卡動態加載JSP頁面,並且整個選項卡設置位於一個JSP(homeinc.jsp)中。任何其他的工作?感謝您的回覆 – user1020713

回答

1

既然你現在已經解釋說,你動態加載的標籤內容(我假設通過AJAX方式),將有一個動態加載的內容沒有新document.ready()。相反,您需要使用用於加載內容的ajax調用的成功處理程序,並在加載新內容時觸發要運行的代碼。您將需要自己觸發該代碼 - 沒有事件會自動執行。

+0

感謝您的解釋,您可以給我一個exaxmple或示例代碼來做到這一點。我可以在選項卡點擊功能的代碼。謝謝 – user1020713

+0

我需要使用加載功能的標籤?你能給我一個我剛接觸jQuery的例子嗎?就像當我點擊一個標籤時,頁面已經加載了圖像滑塊。可能嗎? – user1020713

+0

向我們展示加載標籤內容的代碼,我們可以提供更好的想法。 – jfriend00

相關問題