Поменяйте местами изображение, нажав на ссылку - PullRequest
Новая
       24

Поменяйте местами изображение, нажав на ссылку

0 голосов
/ 29 октября 2018

Я пытаюсь поменять местами изображения, по какой ссылке на аккордеоне вы нажимаете. Например, если вы нажмете первую ссылку аккордеона, он откроет этот аккордеон и изменит изображение над аккордеоном на изображение, которое находится в этом разделе. Если вы щелкнете по следующему пункту, он откроет аккордеон для этой ссылки и изменит его на изображение в этом разделе. Может ли кто-нибудь помочь мне или указать мне правильное направление. Спасибо за вашу помощь.

Вот мой код: 

 <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>

1 Ответ

0 голосов
/ 30 октября 2018

Спасибо кому-то, кто указал мне правильное направление, а затем удалил его (не знаю почему), я нашел решение. Я использовал 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>
...