用jQuery腳本中的圖像替換文本

Question

這件事情按預期工作。 Here的演示。

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script> 

       <script> 
       $(window).load(function() { 
         $('#about, #subscribe, #contact').hide(); 

         $('.home').click(function() { 
         var id = $(this).html().toLowerCase(); 
         var $content = $('#' + id + ':not(:visible)'); 
         if ($('.current').length === 0) { 
          showContent($content) 
         } 
         else { 
          $('.current').fadeOut(600, function() { 
           showContent($content) 
          }); 
         } 
        }); 

        function showContent(content) { 
         content.fadeIn(600); 
         $('.current').removeClass('current'); 
         content.addClass('current'); 
        } 
        }); 
       </script> 

        <div id="nav"> 
         <a class="home" id="show_about" title="About">ABOUT</a><br /> 
         <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br/> 
         <a class="home" id="show_contact" title="Contact">CONTACT</a> 
        </div> 
        <div id="content"> 
         <div class="current" id="about"> 
          <p>ABOUT's content</p> 
         </div> 
         <div id="subscribe"> 
          <p>SUBSCRIBE's content</p> 
         </div> 
         <div id="contact"> 
          <p>CONTACT's content</p> 
         </div> 
        </div> 

我想用圖像替換文字（ABOUT，SUBSCRIBE和CONTACT）。所以我嘗試了with this，但它不起作用..你知道爲什麼嗎？ :)

Answer 1

嘗試使用這樣的：

$('#about, #subscribe, #contact').hide(); 

$('.home').click(function() { 
    var id = this.id.replace('show_', ''); // this line has been changed 
    var $content = $('#' + id + ':not(:visible)'); 
    if ($('.current').length === 0) { 
     showContent($content) 
    } else { 
     $('.current').fadeOut(600, function() { 
      showContent($content) 
     }); 
    } 
}); 

function showContent(content) { 
    content.fadeIn(600); 
    $('.current').removeClass('current'); 
    content.addClass('current'); 
} 

當你點擊一個鏈接需要鏈接的id然後刪除show_並顯示與id股利。以下是一個示例：

用戶單擊頂部鏈接。 id是show_about。 JavaScript的去除show_離開about然後選擇$('#about:not(:visible)');，掉皮它

這是工作：http://jsfiddle.net/dVrV9/

Answer 2

的第一個錯誤我在這裏看到的是在控制檯：

GET http://gioiellidisapone.it/http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.map 404（未找到）

<script type="text/rocketscript" data-rocketsrc="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" data-rocketoptimized="true"></script> 
<script type="text/rocketscript" data-rocketsrc="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" data-rocketoptimized="true"></script> 

你缺少的http：以上線路

Answer 3

<script> 
       $(window).load(function() { 
         $('#about, #subscribe, #contact').hide(); 

         $('.home').click(function() { 
         //var id = $(this).html().toLowerCase(); 
         //var $content = $('#' + id + ':not(:visible)'); 
         var $content = $('#' + $(this).attr('title').toLowerCase() + ':not(:visible)'); // changed Here.. 
         if ($('.current').length === 0) { 
          showContent($content) 
         } 
         else { 
          $('.current').fadeOut(600, function() { 
           showContent($content) 
          }); 
         } 
        }); 

        function showContent(content) { 
         content.fadeIn(600); 
         $('.current').removeClass('current'); 
         content.addClass('current'); 
        } 
        }); 
       </script> 

你所得到的圖片作爲內容..

你必須得到Title屬性來代替。