使用jQuery更改圖片

我有一個使用jquery-ui手風琴的html頁面。現在我必須在這個頁面添加2個圖像，這個圖像應該取決於活動部分。我該怎麼辦？使用jQuery更改圖片

HTML：

<div id="acc"> 
    <h1>Something</h1> 
    <div>Text text text</div> 
    <h1>Something too</h1> 
    <div>Text2 text2 text2</div> 
</div> 
<div id="pic"> 
    <img class="change" src="1.png"/> 
    <img class="change" src="2.png"/> 
</div>

JS：

$(document).ready(function() { 
    $("#acc").accordion({ 
     change: function(event, ui) { 
      /* I'm think something need here */ 
     } 
    }); 
});

來源

2010-04-29 vlad

您是否只想一次顯示2張圖片中的1張？ – jaltiere 2010-04-29 13:40:38

該腳本將顯示第一屏的第一張圖片，提供給第二面板第二IMG等

jQuery(function($) 
{ 

    $("#acc").accordion({ 
     change: function(event, ui) { 
      var index = $(ui.newContent).index("#acc>div"); 

      $("#pic .change") 
      // Hide all 
      .hide() 
      // Find the right image 
      .eq(index) 
      // Display this image 
      .show(); 
     } 
    }); 

});

來源

2010-04-29 13:44:12 jantimon

謝謝，靈活而緊湊。 – vlad 2010-04-29 13:52:03

歡迎您:) – jantimon 2010-04-29 13:54:43

你是正確的;你需要把它放在手風琴的變化事件中。

你可以改變這樣的形象：

$('.change').attr('src', someUrl);

來源

2010-04-29 13:40:30 SLaks

HTML：

<div id="pic"> 
    <img id="change1" class="change" src="1.png"/> 
    <img id="change2" class="change" src="2.png"/> 
</div>

JS（我猜你的條件 - 假設你想每手風琴顯示不同的圖像）

$(document).ready(function() { 
    $("#acc").accordion({ 
     change: function(event, ui) { 
      if(ui.newheader == "A header") { 
       $("#change1").attr("src", "new1.png"); 
       $("#change2").attr("src", "new2.png"); 
      } else if(ui.newHeader == "Another header") { 
       $("#change1").attr("src", "1.png"); 
       $("#change2").attr("src", "2.png"); 
      } 
     } 
    }); 
});

如果您想要在兩個圖像之間切換：

$(document).ready(function() { 
    $("#acc").accordion({ 
     change: function(event, ui) { 
      if(ui.newheader == "A header") { 
       $("#change1").hide(); 
       $("#change2").show(); 
      } else if(ui.newHeader == "Another header") { 
       $("#change1").show(); 
       $("#change2").hide(); 
      } 
     } 
    }); 
});

來源

2010-04-29 13:41:06 justkt

第二個 - 是我需要的東西。謝謝！ – vlad 2010-04-29 13:52:47

ñ我的經驗用圖像與量變到質變的div使用：

HTML ：

<div id="pic"><img id="1" src=""></div>

和jQuery：

var url =「」;

$(document).ready(function() { 
    $("#acc").accordion({ 
     change: function(event, ui) { 
      var url = ""; 
      /* set immage url here */ 

      $('1').attr("src", url); 
     } 
    }); 
});

，並與該U可以有很多圖片爲u喜歡量變到質變的同一div

PS。

如果你不喜歡你的IMG beeing負載空u可以使用

顯示：無;

的CSS屬性

，然後使用.show（）;第一次點擊時功能

來源

2013-07-29 13:39:09

使用jQuery更改圖片

回答

相關問題