Javascript 通过单击主页更改导航页面中的img src

我对JS、jQuery和所有其他工具都是新手

我有一个应用程序导航栏，上面有一张图片，当我点击主页上的图片/链接时需要更改

需要更改的导航HTML

       <img class="campus" src="img/Dansaertrond.png">
       <h4>Stuvo <span class="light">EhB</br>
       Campus</span></h4>

      <div class="campus">
        <a href="#">
        <img class="photo" src="img/Dansaert.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/kaai.png">
        </a>
        <a href="#">
        <img class="photo" src="img/ttk.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/RITS.png">
        </a>
        <a href="#">
        <img class="photo" src="img/KCB.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/jette.png">
        </a>
      </div>

斯图沃EhB

校园

用于更改图片来源的主页的HTML

       <img class="campus" src="img/Dansaertrond.png">
       <h4>Stuvo <span class="light">EhB</br>
       Campus</span></h4>

      <div class="campus">
        <a href="#">
        <img class="photo" src="img/Dansaert.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/kaai.png">
        </a>
        <a href="#">
        <img class="photo" src="img/ttk.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/RITS.png">
        </a>
        <a href="#">
        <img class="photo" src="img/KCB.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/jette.png">
        </a>
      </div>

快速解释-如果你启动应用程序，你会看到你的主页上有所有图片，你点击一个，然后该图片就会出现在导航屏幕上，如果你再次更改它，同样如此

你发现改变img src的正常事情并不是我需要的，因为我不需要点击它，它主要只是改变图片

有人知道怎么做吗/如果可能的话？

$（文档）.ready（函数（）{
$（'div.campus img'）。在（'click'，function（）上{
var newSrc=$（this.attr（'src'）；
$（'img.campus'）.attr（'src'，newSrc）；
});                       
});


您可以将图像作为旋转木马播放，而不是单击后获取图像

试试这个：
首先，如果您提供了一些关于挑战的更好的信息，可能是一些代码片段，那么回答起来会更容易。这能回答你的问题吗


否则,

我认为你所拥有的可以用三个元素来建模。单击其中一个主页元素，它会更改导航栏元素上的图像源


$（'#红色'）。单击（函数（）{
$（'#nav img'）.attr（“src”，“red.png”）.removeClass（'green'）.addClass（'red'）；
});
$（'#绿色'）。单击（函数（）{
$（'#nav img'）.attr（“src”，“green.png”）.removeClass（'red'）.addClass（'green'）；
});
#红色、.red{
背景色：红色；
高度：20px；
宽度：20px；
}
#绿色，。绿色{
背景颜色：绿色；
高度：20px；
宽度：20px；
}

您需要提供最少的示例。在jsfiddle.net上发布一个示例@AndrejsCainikovs的可能副本，我不想再弹出另一个div，我已经在那里拥有了所有内容，只是当单击主页中的图像时导航栏中的图像应该会更改谢谢，这真的帮了我的忙！）