时间戳

首页 > 解决方案 > 选项卡更改 HTML 时更改图像

javascript - 选项卡更改 HTML 时更改图像

问题描述

我目前正在做一个网站，我似乎无法弄清楚如何在您单击其他选项卡时更改标记为 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>

标签： javascripthtml

解决方案

您可以使用 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>

这是一个示例的链接： https ://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

希望对你有帮助，祝你好运！

推荐阅读