如何通过单击Javascript中的图像来更改内容？

Question

我有一个小提琴 ，我想在其中应用一些逻辑。

单击Franchise Hub图像时，我希望桌面屏幕及其旁边的文本与下面的电话屏幕一起显示，并且其旁边的内容被隐藏 。

鉴于单击“ 基于云和移动”时 ，我希望移动屏幕及其旁边的文本应与电视屏幕一起显示，并且其旁边的内容将被隐藏 。

Javascript：

为了实现上述逻辑，我尝试过的Javascript代码是：

const cbBtn = document.querySelector('img#franchise-hub');

const cloudbasedtextipad = document.querySelector('div.cloudbasedtextipad');

cbBtn.addEventListener('click', event => {
cloudbasedtextipad.style.display = 'block';
cbBtn.className = 'active';
});

问题陈述：

我想知道我应该对上面的Javascript代码进行哪些更改，以便在单击不同的图像时应显示不同的内容。

 const cbBtn = document.querySelector('img#franchise-hub'); const cloudbasedtextipad = document.querySelector('div.cloudbasedtextipad'); cbBtn.addEventListener('click', event => { cloudbasedtextipad.style.display = 'block'; cbBtn.className = 'active'; }); 

 .product-contents { margin-left: 15%; margin-right: 15%; display: flex; justify-content: space-between; background-color: #f0f0f0; align-items: center; padding: 1rem; margin-bottom: 5%; } .product-contents .product { width: 10%; text-align: center; height: 150px; padding-top: 1%; padding-left: 1%; padding-right: 1%; border-style: solid; border-width: 3px; border-color: rgb(145, 147, 150); background-color: white; border-radius: 10px } .product-contents .product #franchise-hub { margin-bottom: 22%; } .product-contents .product #cloud-based-mobile { margin-bottom: 30%; } .product-contents .product #business-analytics { margin-bottom: 28%; } .product-contents .product #tech-support { margin-bottom: 27%; } .product-contents .product #order-management { margin-bottom: 27%; } .product-contents .product #employee-management { margin-bottom: 18%; } .product-contents .product #white-label { margin-bottom: 15%; } .product-contents .product #brand-control { margin-bottom: 20%; } .product-contents .product #lead-tracking { margin-bottom: 28%; } .product-contents .product #custom-invoicing { margin-bottom: 27%; } .product-contents .product #goal-setting { margin-bottom: 26%; } .product-contents .product #customization-tools { margin-bottom: 27%; } .product-contents .product #royalty-calculator { margin-bottom: 27%; } .product-contents .product #email-marketing { margin-bottom: 24%; } .ipads { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .tvs { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .cloud-based-text { width: 50%; } .franchise-hub-text { width: 50%; } div.cloudbasedtextipad { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } div.franchisehubtv { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; } 

 <div class="product-contents"> <div class="product"> <img id="franchise-hub" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942"> <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; color: rgb(58, 59, 60);">Franchise Hub</p> </div> <div class="product" style="background-color:green;border:0;"> <img id="cloud-based-mobile" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-white.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8042" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; color: white;">Cloud Based & Mobile</p> </div> </div> <div class="cloudbasedtextipad"> <div class="cloud-based-text"> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397">Software that works the way you do</p> <p style="padding: 20px 11px; width: 90%; color:#3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal;">We're cloud-based and mobile-first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.</p> </div> <div class="ipads"> <div class="ipad"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Ipad-Screen-4-153x300.png" alt="" width="153" height="300" class="size-medium wp-image-8091"> </div> <div class="ipad"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Ipad-Screen-4-153x300.png" alt="" width="153" height="300" class="size-medium wp-image-8091"> </div> </div> </div> <div class="franchisehubtv"> <div class="franchise-hub-text"> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397">Software that works the way you do</p> <p style="padding: 20px 11px; width: 90%; color:#3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal;">We're cloud-based and mobile-first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.</p> </div> <div class="tvs"> <div class="tv"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081"> </div> <div class="tv"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081"> </div> </div> </div> 

Answer 1

选择颜色切换也已实现。

 $("#mobile").click(function() { if ($('.cloudbasedtextipad').css('display') == "flex") { $('.cloudbasedtextipad').css('display', 'none'); $('#mobile').css('background-color', 'lightgray'); $('#desktop').css('background-color', 'lightgray'); } else { $('.cloudbasedtextipad').css('display', 'flex'); $('#mobile').css('background-color', 'green'); $('#desktop').css('background-color', 'lightgray'); $('.franchisehubtv').css('display', 'none'); } }); $("#desktop").click(function() { if ($('.franchisehubtv').css('display') == "flex") { $('.franchisehubtv').css('display', 'none'); $('#desktop').css('background-color', 'lightgray'); $('#mobile').css('background-color', 'lightgray'); } else { $('.franchisehubtv').css('display', 'flex'); $('.cloudbasedtextipad').css('display', 'none'); $('#desktop').css('background-color', 'green'); $('#mobile').css('background-color', 'lightgray'); } }); 

 .product-contents { margin-left: 15%; margin-right: 15%; display: flex; justify-content: space-between; background-color: #f0f0f0; align-items: center; padding: 1rem; margin-bottom: 5%; } .product-contents .product { width: 10%; text-align: center; height: 150px; padding-top: 1%; padding-left: 1%; padding-right: 1%; border-style: solid; border-width: 3px; border-color: rgb(145, 147, 150); background-color: white; border-radius: 10px } .product-contents .product #franchise-hub { margin-bottom: 22%; } .product-contents .product #cloud-based-mobile { margin-bottom: 30%; } .product-contents .product #business-analytics { margin-bottom: 28%; } .product-contents .product #tech-support { margin-bottom: 27%; } .product-contents .product #order-management { margin-bottom: 27%; } .product-contents .product #employee-management { margin-bottom: 18%; } .product-contents .product #white-label { margin-bottom: 15%; } .product-contents .product #brand-control { margin-bottom: 20%; } .product-contents .product #lead-tracking { margin-bottom: 28%; } .product-contents .product #custom-invoicing { margin-bottom: 27%; } .product-contents .product #goal-setting { margin-bottom: 26%; } .product-contents .product #customization-tools { margin-bottom: 27%; } .product-contents .product #royalty-calculator { margin-bottom: 27%; } .product-contents .product #email-marketing { margin-bottom: 24%; } .ipads { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .tvs { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .cloud-based-text { width: 50%; } .franchise-hub-text { width: 50%; } div.cloudbasedtextipad { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; margin-bottom: 5%; } div.franchisehubtv { display: flex; margin-left: 15%; margin-right: 15%; align-items: center; background-color: #f0f0f0; padding: 2%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="product-contents"> <div class="product" id="mobile"> <img id="franchise-hub" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7942"> <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; color: rgb(58, 59, 60);">Franchise Hub</p> </div> <div class="product" id="desktop" style="background-color:green"> <img id="cloud-based-mobile" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-white.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8042" /> <p style=" font-size: 15px; font-family: 'Roboto';line-height:1.2; ">Cloud Based & Mobile</p> </div> </div> <div class="cloudbasedtextipad" style="display:none;"> <div class="cloud-based-text"> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397">Software that works the way you do</p> <p style="padding: 20px 11px; width: 90%; color:#3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal;">We're cloud-based and mobile-first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.</p> </div> <div class="ipads"> <div class="ipad"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Ipad-Screen-4-153x300.png" alt="" width="153" height="300" class="size-medium wp-image-8091"> </div> <div class="ipad"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Ipad-Screen-4-153x300.png" alt="" width="153" height="300" class="size-medium wp-image-8091"> </div> </div> </div> <div class="franchisehubtv" style="display:flex;"> <div class="franchise-hub-text"> <p style="font-family: 'Roboto'; font-weight: normal;color:#929397">Software that works the way you do</p> <p style="padding: 20px 11px; width: 90%; color:#3b3b3d; background: white; border-radius: 2px; line-height: 1.625; font-family: 'Roboto'; font-weight: normal;">We're cloud-based and mobile-first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.</p> </div> <div class="tvs"> <div class="tv"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081"> </div> <div class="tv"> <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081"> </div> </div> </div> 

Answer 2

我只实现第一种情况。 您必须学习如何实施第二个。 首先，div.cloudbasedtextipad的CSS更改为

div.cloudbasedtextipad
{   
display: none;
margin-left: 15%;
margin-right: 15%;
align-items: center;
background-color: #f0f0f0;
padding: 2%;
margin-bottom: 5%;
}

并且javascript更改如下：

    const cbBtn = document.querySelector('img#franchise-hub');

    const cloudbasedtextipad = document.querySelector('div.cloudbasedtextipad');

    cbBtn.addEventListener('click', event => {
        cloudbasedtextipad.style.display = 'flex';
    });