Question

之前已经提出过这个问题，但它似乎并不适合我。

我连续有多个图像用作导航，并且绝对位于我页面的一侧。单击一个时，我希望图像从白点变为橙色点，并且HAD变为橙色的点变为白色。

我尝试了很多不同的方法，但这就是我现在所拥有的。

function switchImage(){
    if (document.getElementById("img1").src == "http://scoutingwithtroop225.com/White%20Dot.jpeg"){
        document.getElementById("img1").src = "http://dbprng00ikc2j.cloudfront.net/work/image/269918/qg7swq/ORANGE_DOT.jpg";
    }else{
            (document.getElementById("img1").src = "http://scoutingwithtroop225.com/White%20Dot.jpeg");
    }
}

Answer 1

你走了：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type='text/javascript'>
    function switchImg(){
    if($('#white').css('display') == 'none'){
        $('#white').css('display', 'block');
        $('#orange').css('display', 'none');
    }
    else
    {
        $('#white').css('display', 'none');
        $('#orange').css('display', 'block');
    }
  }
</script>


<div class="dots">
    <img id="white" onclick="switchImg()" src="http://scoutingwithtroop225.com/White%20Dot.jpeg" />
    <img id="orange" style="display:none" onclick="switchImg()" src="http://dbprng00ikc2j.cloudfront.net/work/image/269918/qg7swq/ORANGE_DOT.jpg" />
</div>

PLNKR

Answer 2

I have used two images for u and here is the working example

无标题文档

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="dots">
        <a href="#top"><img id="img1" class="individualDot" src="http://scoutingwithtroop225.com/White%20Dot.jpeg" height="170"></a>
        <a href="#listen"><img id="img2" class="individualDot"  src="http://dbprng00ikc2j.cloudfront.net/work/image/269918/qg7swq/ORANGE_DOT.jpg" 
        height="170"></a>


    </div>
<script type="text/javascript">
$(document).ready(function() {
    $("#img1").click(function(){
        var img1 = $('#img1').attr("src");
        var img2 = $('#img2').attr("src");

        $("#img2").attr("src",img1);
        $("#img1").attr("src",img2);
        })

});
</script>
</body>
</html>

在两个图像之间切换onclick javascript

2 个答案: