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

您可以按照以下方式进行操作。

分配data attributes，例如data-url导航项目，然后获取该属性的值以动态更改图像源
获取具有类nav-item的所有元素并将其绑定到一个函数，该函数将在单击时触发
在这种情况下，通过获取data-url属性来更改图片网址

window.onload = function()
{
  var navItems = document.getElementsByClassName("nav-item");
  var imageChangeFunction = function() 
  {
    var attribute = this.getAttribute("data-url");
    
      console.log(attribute);
    var image = document.getElementById("myImage");
    image.src = attribute;
    image.title = attribute;
    image.alt = attribute;
};

for (var i = 0; i < navItems.length; i++) {
    navItems[i].addEventListener('click', imageChangeFunction, false);
}
}

<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" data-url="Image 1 Url goes here"><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" data-url="Image 2 Url goes here"><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" data-url="Image 3 Url goes here"><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 2

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

希望有帮助，祝您好运！

标签更改HTML时更改图像

2 个答案: