單擊引導手風琴鏈接以交換圖像

Question

我正在嘗試根據您單擊的手風琴鏈接交換圖像。 例如，如果您單擊第一個手風琴鏈接，它將打開該手風琴並將手風琴上方的圖像更改為該部分中的圖像。 如果單擊下一步，它將打開該鏈接的手風琴並將其更改為該部分中的圖像。 有人可以幫助我或為我指明正確的方向。 感謝你的幫助。

這是我的代碼：

 <img src="link to image I want changed" />
 <div id="accordion" style="margin-top: 10px">
 <div class="card" style="border-color: #FF9106; border-width: 1px;">
 <div class="card-header" style="background-color: #ffffff;" 
  id="headingOne">
  <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" >
       <h5 class="mb-0">first Link</h5>
    </button>
  </h5>
</div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body" style="margin: 10px; background-color:#FDFDFD">
    <p><img src="assets/img/station2/Timeline_MTP.svg" /></p>
     <ul>
                                        <li><span>....</span></li>
                                        <li><span>....</span></li>
                                        <li><span>....</span></li>
                                    </ul>

  </div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingTwo">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
     2nd Link
    </button>
  </h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
  <div class="card-body" style="margin: 10px">
   <p><img src="assets/img/station2/Timeline_LTP.svg" /></p>
    <ul>
                                        <li><span>....</span></li>
                                        <li><span>....</span></li>
                                    </ul>

  </div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingThree">
  <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      3rd Link
    </button>
  </h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
  <div class="card-body" style="margin: 10px">
                             <p><img src="assets/img/station2/Timeline_FULL.svg" /></p>
                              <ul>
                                        <li><span>....</span></li>
                                        <li><span>....</span></li>
                                    </ul>

                                                    </div>
  </div>
</div>
</div>

Answer 1

感謝有人向我指出了正確的方向，然后刪除了它（不確定原因），我找到了解決方案。 我使用javascript替換了圖像並將其添加到手風琴的按鈕上。

<script>
    function Showpic1() 
{
    document.getElementById("image").src = "assets/img/station2/Timeline_MTP.svg";  
}

function Showpic2() 
{
    document.getElementById("image").src = "assets/img/station2/Timeline_LTP.svg"; 
}
function Showpic3() 
{
    document.getElementById("image").src = "assets/img/station2/Timeline_FULL.svg"; 
}
</script>

的HTML

中期預測（最長5年）

 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body" style="margin: 10px; background-color:#FDFDFD"> <ul> <li><span>...</span></li> </ul> </div> </div> </div> <div class="card" style="border-color: #FF9106; border-width: 1px;"> <div class="card-header" style="background-color: #ffffff;" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" onclick="Showpic2()"> Long-term macroeconomic projections (beyond 5 years) </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body" style="margin: 10px"> <ul> <li><span>...</span></li> </ul> </div> </div> </div> <div class="card" style="border-color: #FF9106; border-width: 1px;"> <div class="card-header" style="background-color: #ffffff;" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" onclick="Showpic3()"> Long-term growth projections (beyond 5 years) need to consider the stage of development. </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body" style="margin: 10px"> <ul> <li><span>...</span></li> </ul> </div> </div> </div> </div>