选项卡更改HTML时更改图像

Question

我目前正在做一个网站，我似乎不知道如何使图像标记为myImage时，您单击一个不同的选项卡。

这是我的密码。任何帮助都将不胜感激，我已经很久没有用HTML编码了。

​

<div class="media-container-row mt-5 pt-3">
            <div class="mbr-figure" style="width: 50%;">
                <img id="myImage" src="assets/images/image1.jpg" alt=Security" title="">
            </div>
            <div class="tabs-container">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item"><a class="nav-link mbr-fonts-style active show display-7" role="tab" data-toggle="tab" href="#tabs4-7_tab0" aria-selected="true">
                            Door Supervisors</a></li>
                    <li class="nav-item"><a class="nav-link mbr-fonts-style active show display-7" role="tab" data-toggle="tab" href="#tabs4-7_tab1" aria-selected="true">Manned Guarding</a></li>
                    <li class="nav-item"><a class="nav-link mbr-fonts-style active show display-7" role="tab" data-toggle="tab" href="#tabs4-7_tab2" aria-selected="true">Close Protection</a></li>
                    
                    
                    
                </ul>
                <div class="tab-content">
                    <div id="tab1" class="tab-pane in active" role="tabpanel">
                        <div class="row">
                            <div class="col-md-12">
                                <p class="mbr-text py-5 mbr-fonts-style display-7">
                                    Security offers bespoke packages for Door Supervisors. Our Door Supervisors are professional, delivering to your customers great service by being friendly and allowing you to have piece of mind when it comes to your venue.&nbsp;</p>
                            </div>
                        </div>
                    </div>
                    <div id="tab2" class="tab-pane" role="tabpanel">
                        <div class="row">
                            <div class="col-md-12">
                                <p class="mbr-text py-5 mbr-fonts-style display-7"> Security can also offer Manned Security to your premises. Manned Guards being brilliant deterrents to Tresspassers, Thieves and other threats to your premises or land.</p>
                            </div>
                        </div>
                    </div>

​

Answer 1

您可以使用JS或jQuery轻松地做到这一点。我会这样做：

<img id="myImage" src="IMG_0680.JPG">
<div onclick="document.getElementById('myImage').src='IMG_0680.JPG'">TAB_ONE</div>
<div onclick="document.getElementById('myImage').src='IMG_0681.JPG'">TAB_TWO</div>        

下面是指向一个示例的链接：lightbulb

希望能帮上忙，祝你好运！