Question

我有一个使用jquery-ui手风琴的html页面。现在我必须在此页面中添加2图像，该图像应根据活动部分而有所不同。我该怎么办？

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 */
        }
    });
});

Answer 1

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();
            }
        }
    });
});

Answer 2

此脚本将显示第一个面板的第一个img，第二个面板的第二个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();
       }
   });

});

Answer 3

你是对的;你需要把它放在手风琴的变化事件中。

您可以像这样更改图片：

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

Answer 4

n我对改变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);
        }
    });
});

并且你可以拥有与你在同一个div中改变一样多的图片

PS。

如果你不喜欢你的img beeing空载，你可以使用

显示：无;

css属性

然后使用.show（）;点击第一次时的功能

使用jQuery更改图像

4 个答案: