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>

单击引导手风琴链接以交换图像

1 个答案: