我有一个菜单，上面有像图标一样的图像，当我点击其中一个时，它会显示不同的东西，当它“活动”时，我想改变图像，当我点击下一个时，我想把它变成红色，再变成灰色，如果我清楚的话。我试过很多方法，但都不起作用。

现在看起来怎么样

应该是什么样子

当我点击下一个

这是我的实际代码，100%是HTML/CSS，但我也可以使用JS

谢谢

<div class="filter-foodmenu-tab">
    <ul class="nav nav-tabs" role="tablist">
      <li>
        <a data-toggle="tab" href="#foodmenu1" role="tab"><span>
          <img src="menu/cat-midi_grey.png" width="40px" class="foodmenu1" id ="img1" onclick="changeImage()"></span><br/><br/>
          formule midi</a>
      </li>
      <li>
        <a data-toggle="tab" href="#foodmenu2" role="tab"><span>
          <img src="menu/cat-entree_grey.png" width="40px" class="foodmenu2" id ="img2"></span><br/><br/>  
          entrées</a>
      </li>
      <li>
        <a data-toggle="tab" href="#foodmenu3" role="tab"><span>
          <img src="menu/cat-piadina_grey.png" width="40px" class="foodmenu3" id="img3" ></span><br/><br/> 
          piadinas</a>
      </li>
      <li>
        <a class="active" data-toggle="tab" href="#foodmenu3-1" role="tab"><span>
          <img src="menu/cat-piadina_grey-1.png" width="40px" class="foodmenu3-1" id="img4"></span><br/><br/> 
          la pinsa</a>
      </li>
      <li>
        <a data-toggle="tab" href="#foodmenu4" role="tab"><span>
          <img src="menu/cat-pates_grey.png" width="40px" class="foodmenu4" id="img5"></span><br/><br/>
          pâtes</a>
      </li>
      <li>
        <a data-toggle="tab" href="#foodmenu5" role="tab"><span>
          <img src="menu/cat-dessert_grey.png" width="40px" class="foodmenu5" id="img6"></span><br/><br/> 
          desserts</a>
      </li>
      <li>
        <a data-toggle="tab" href="#foodmenu6" role="tab"><span>
          <img src="menu/cat-bambino_grey.png" width="70px" class="foodmenu6" id="img7"></span><br/>
          menu bambino</a>
      </li>
    </ul>
  </div>

顺晟科技：

您可以为此使用一个简单的JS函数。 首先，在每个img标记中添加要处理的click事件。 然后，添加这个html标记以包含JS代码: