2013-10-11 26 views
0

任何人都可以告诉我如何包括淡入淡出影响一旦一个选项卡被点击? 我玩过FadeIN,但无法使用它。任何帮助深表感谢!添加时尚效果JQuery标签

谢谢veyr多!

enter code here 

<script> 
     // Wait until the DOM has loaded before querying the document 
     $(document).ready(function(){ 
      $('ul.tabs').each(function(){ 


enter code here 

     // For each set of tabs, we want to keep track of 
       // which tab is active and it's associated content 
       var $active, $content, $links = $(this).find('a'); 

       // If the location.hash matches one of the links,  use that as the active tab. 
       // If no match is found, use the first link as the initial active tab. 
       $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
       $active.addClass('active').fadeIn(200); 
       $content = $($active.attr('href')); 

       // Hide the remaining content 
       $links.not($active).each(function() { 
        $($(this).attr('href')).hide(); 
       }); 

       // Bind the click event handler 
       $(this).on('click', 'a', function(e){ 
        // Make the old tab inactive. 
        $active.removeClass('active'); 
        $content.hide(); 

        // Update the variables with the new link and content 
        $active = $(this); 
        $content = $($(this).attr('href')); 

        // Make the tab active. 
        $active.addClass('active'); 
        $content.show(); 

        // Prevent the anchor's default click action 
        e.preventDefault(); 
       }); 
      }); 
     }); 
+0

你可以用一个例子创建一个http://jsfiddle.net/并在这里分享吗? – Trevor

回答

0

只要$内容指的是一个有效的对象,只要将你的淡出在适当情况下。

  // Bind the click event handler 
      $(this).on('click', 'a', function(e){ 

       // Prevent the anchor's default click action 
       e.preventDefault(); 

       // Make the old tab inactive. 
       $active.removeClass('active'); 
       $content.fadeOut(500); 
       // Update the variables with the new link and content 
       $active = $(this); 
       $content = $($(this).attr('href')); 

       // Make the tab active. 
       $active.addClass('active'); 
       $content.fadeIn(500); 

      }); 

我搬到了preventDefault顶端,因为它可能是最好的最初的onClick要采取的行动。