Question

我有一些步骤。比如

<li>Step1</li>
<li>Step2</li>
<li>Step3</li>
<li>Step4</li>
<li>Step5</li>

在每一步我想展示他们的相关形象。就像我有另一个div

<div><img src="step1"></div>

我希望该步骤将逐一突出显示，我的图像将根据其自动更改。任何的想法。提前谢谢。

我试过了

$(document).ready(function() {

    var $divs = $("div").show(),
        current = 0;

    $divs.eq(0).attr("style","color:red");

    function showNext() {
        if (current < $divs.length - 1) {
            $divs.eq(current).delay(2000).show('fast', function() {

                current++;
                $divs.eq(current).attr("style","color:red");
                showNext();
            });
        }
    }
    showNext();

});

Answer 1

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('li[id^="step"]').click(function(){
    var imagepath = jQuery(this).attr('dir');
    jQuery('#ImageDiv').find('img').attr('src',imagepath);
});
});
</script>
<style>
li{ cusrsor:pointer; padding:10px; }
</style>

<li id="step1" dir="images1.jpg">Step1</li>
<li id="step2" dir="images2.jpg">Step2</li>
<li id="step3" dir="images3.jpg">Step3</li>
<li id="step4" dir="images4.jpg">Step4</li>
<li id="step5" dir="images5.jpg">Step5</li>

<div id="ImageDiv"><img src="images1.jpg"></div>

根据步骤自动更改图像

1 个答案: