單擊圖像后，如何與另一個圖像交換圖像？

Question

我正在嘗試做的一些背景：

我正在制作一個頁面，頂部有 4 個圖標/imgs，當單擊每個圖標時，某些內容會顯示在其下方。 用戶可以單擊任何圖標來隱藏當前並顯示與他們單擊的圖標相關的內容。

到目前為止，我已經開始工作了，但現在我試圖讓圖標在被點擊后更改為另一個圖標，以顯示某些內容處於活動狀態/顯示在頁面上。

我試過使用 onclick，但看到我已經有一個 onclick 功能，我不確定它是如何工作的。

現在我被困在如何繼續，非常感謝任何幫助。

這是我到目前為止所擁有的：

測試小提琴

 function show(param_div_id) { document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).innerHTML; } window.onload = function() { show('operation1'); }

 #operation1, #operation2, #operation3, #operation4 { display: none; } .div1 ul, .div2 ul, .div3 ul, .div4 ul { padding-left: 25px; line-height: 2; font-weight: 600; } .div1 .container, .div2 .container, .div3 .container, .div4 .container { padding-bottom: 4%; } .div1 a { border-left: 5px solid #BAC36A; padding-left: 10px; color: #214D29; font-weight: 600; margin-left: 8px; } #click_imgs h5 { color: #3D4643; } #image-one img, #image-two img, #image-three img, #image-four img { transition: transform 0.5s; } #image-one img:hover, #image-two img:hover, #image-three img:hover, #image-four img:hover { transform: scale(1.1); } #image-one img:active { background: url('https://www.wallisbank.com/wp-content/uploads/Overview_active@2x.png') no-repeat center; background-size: 100% 100%; } #click_imgs h5 { padding-top: 20px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!----> <div style="text-align: center; padding-bottom: 4%;"> <div id="click_imgs" style="display: flex; padding-bottom: 20px; justify-content: space-between;"> <div id="image-one"><img onclick="show('operation1')" src="https://via.placeholder.com/150x150.png?text=ICON+1" width="150" /> <h5>ICON 1</h5> </div> <div id="image-two"><img onclick="show('operation2')" src="https://via.placeholder.com/150x150.png?text=ICON+2" width="150" /> <h5>ICON 2</h5> </div> <div id="image-three"><img onclick="show('operation3')" src="https://via.placeholder.com/150x150.png?text=ICON+3" width="150" /> <h5>ICON 3</h5> </div> <div id="image-four"><img onclick="show('operation4')" src="https://via.placeholder.com/150x150.png?text=ICON+4" width="150" /> <h5>ICON 4</h5> </div> </div> </div> <hr> <div id="main_place"> main </div> <div id="operation1"> <h1 class="360_sub_titles" style="color: #214D29;"> CONTENT 1 </h1> <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. Curabitur sit amet tortor id nisl tempus venenatis. Vivamus semper, dolor sed vulputate finibus, magna dui faucibus est, id finibus risus arcu in velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam mattis volutpat efficitur. Phasellus venenatis turpis nibh, auctor tincidunt diam dictum non. Vestibulum tincidunt interdum efficitur. Integer cursus aliquet blandit. Donec auctor augue vitae metus faucibus, ut semper felis egestas. Nunc eu mattis lacus, non fermentum mauris. </p> <div class="div1"> <div> <div id="360-slide-1"> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 1</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> <li>Integer eleifend erat elit</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+1" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+2" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 2</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus venenatis turpis nibh</li> <li>Curabitur sit amet tortor id nisl tempus venenatis</li> <li>Integer in ex nunc</li> </ul> <a href="#">LEARN MORE</a> </div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 3</h3> <ul style="color: #3d4643;"> <li>Integer in ex nunc</li> <li>Curabitur sit amet tortor id nisl tempus venenatis</li> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus venenatis turpis nibh</li> </ul> <a href="#">LEARN MORE</a> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+3" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+4" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 4</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> <li>Integer eleifend erat elit</li> </ul> <a href="#">LEARN MORE</a> </div> </div> </div> </div> </div> </div> </div> <div id="operation2"> <h1 class="360_sub_titles" style="color: #214D29;"> CONTENT 2 </h1> <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. Curabitur sit amet tortor id nisl tempus venenatis. Vivamus semper, dolor sed vulputate finibus, magna dui faucibus est, id finibus risus arcu in velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <div class="div2"> <div> <div id="360-slide-2"> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 1</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+1" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+2" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 2</h3> <ul style="color: #3d4643;"> <li>Integer in ex nunc</li> <li>Curabitur sit amet tortor id nisl tempus venenatis</li> <li>Lorem ipsum dolor sit amet</li> </ul> </div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 3</h3> <ul style="color: #3d4643;"> <li>Integer in ex nunc</li> <li>Curabitur sit amet tortor id nisl tempus venenatis</li> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus venenatis turpis nibh</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+3" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+4" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 4</h3> <ul style="color: #3d4643;"> <li>Integer in ex nunc</li> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus venenatis turpis nibh</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div id="operation3"> <h1 class="360_sub_titles" style="color: #214D29;"> CONTENT 3 </h1> <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. </p> <div class="div2"> <div> <div id="360-slide-3"> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 1</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+1" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+2" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 2</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Integer eleifend erat elit</li> </ul> </div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 3</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Integer eleifend erat elit</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+3" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+4" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 4</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div id="operation4"> <h1 class="360_sub_titles" style="color: #214D29;"> CONTENT 4 </h1> <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. </p> <div class="div4"> <div id="360-slide-4"> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 1</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+1" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+2" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 2</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 3</h3> <ul style="color: #3d4643;"> <li>Maecenas sagittis dui tempus, porttitor erat et</li> <li>Integer eleifend erat elit</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+3" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+4" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 4</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> </div> </div> </div> </div> </div>

Answer 1

您可以使用eventlistener javascript API添加多個事件偵聽器； 您還可以通過更改其src屬性來動態更改img標簽圖像：

 let clicked = false; let ico = document.getElementById('ico'); // add listener for 'click' event on the '#ico' image ico.addEventListener('click', (event) => { clicked = !clicked; if (clicked) { ico.src = "https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg"; } else { ico.src = "https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg"; } }); // second event listener ico.addEventListener('click', (event) => { console.log('clicked'); });

 <img id="ico" height="75" width="75" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg">

要解決您的問題，您只需在每個圖標上添加一個事件偵聽器並跟蹤當前選擇了哪個：

 let selected = null; let icons = document.getElementsByClassName('ico'); for (const ico of icons) { ico.addEventListener('click', (event) => { selected = event.target; for (const ico of icons) { ico.src = "https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg"; } selected.src = "https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg"; }); }

 <img class="ico" height="75" width="75" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg"> <img class="ico" height="75" width="75" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg"> <img class="ico" height="75" width="75" src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg">

Answer 2

這說明了一種方法。 使用數據屬性來存儲有關元素的信息。 然后，您無需將邏輯硬編碼到您的腳本中，因為您就可以使用這些邏輯。 對於每個圖像導航項，您可以添加以下 3 個數據屬性：

<img data-clickref="operation1" 
     data-src="https://via.placeholder.com/150x150.png?text=ICON+1" 
     data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+1+-CLICKED" 
     width="150" />

在window.load偵聽器中，我們遍歷這些並將src （注意它丟失）設置為data-src 。 然后還在同一個循環中附加點擊偵聽器。 最后一行show()傳遞了一個類似於我們函數期望的人造事件對象。

// set it all up
window.addEventListener('load', () => {
  document.querySelectorAll('img[data-clickref]').forEach(el => {
    // set up the initial image
    el.src = el.dataset.src
    el.addEventListener('click', show)
  })
  show({ target: document.querySelector('img[data-clickref]') });
})

每次點擊導航項時，我們data-activesrc在show(e)函數中使用data-activesrc更改src 。 e代表點擊事件，被點擊的item是e.target ，我們需要展示的HTML元素是e.target.dataset.clickref

 function show(e) { let param_div_id = e.target.dataset.clickref document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).innerHTML; //reset all document.querySelectorAll('img[data-clickref]').forEach(el => el.src = el.dataset.src) e.target.src = e.target.dataset.activesrc; } window.addEventListener('load', () => { document.querySelectorAll('img[data-clickref]').forEach(el => { // set up the initial image el.src = el.dataset.src el.addEventListener('click', show) }) show({ target: document.querySelector('img[data-clickref]') }); })

 #operation1, #operation2, #operation3, #operation4 { display: none; } .div1 ul, .div2 ul, .div3 ul, .div4 ul { padding-left: 25px; line-height: 2; font-weight: 600; } .div1 .container, .div2 .container, .div3 .container, .div4 .container { padding-bottom: 4%; } .div1 a { border-left: 5px solid #BAC36A; padding-left: 10px; color: #214D29; font-weight: 600; margin-left: 8px; } #click_imgs h5 { color: #3D4643; } #image-one img, #image-two img, #image-three img, #image-four img { transition: transform 0.5s; } #image-one img:hover, #image-two img:hover, #image-three img:hover, #image-four img:hover { transform: scale(1.1); } #image-one img:active { background: url('https://www.wallisbank.com/wp-content/uploads/Overview_active@2x.png') no-repeat center; background-size: 100% 100%; } #click_imgs h5 { padding-top: 20px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!----> <div style="text-align: center; padding-bottom: 4%;"> <div id="click_imgs" style="display: flex; padding-bottom: 20px; justify-content: space-between;"> <div id="image-one"><img data-clickref="operation1" data-src="https://via.placeholder.com/150x150.png?text=ICON+1" data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+1+-CLICKED" width="150" /> <h5>ICON 1</h5> </div> <div id="image-two"><img data-clickref="operation2" data-src="https://via.placeholder.com/150x150.png?text=ICON+2" data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+2+-CLICKED" width="150" /> <h5>ICON 2</h5> </div> <div id="image-three"><img data-clickref="operation3" data-src="https://via.placeholder.com/150x150.png?text=ICON+3" data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+3+-CLICKED" width="150" /> <h5>ICON 3</h5> </div> <div id="image-four"><img data-clickref="operation4" data-src="https://via.placeholder.com/150x150.png?text=ICON+4" data-activesrc="https://via.placeholder.com/150x150.png?text=ICON+4+-CLICKED" width="150" /> <h5>ICON 4</h5> </div> </div> </div> <hr> <div id="main_place"> main </div> <div id="operation1"> <h1 class="360_sub_titles" style="color: #214D29;"> CONTENT 1 </h1> <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. Curabitur sit amet tortor id nisl tempus venenatis. Vivamus semper, dolor sed vulputate finibus, magna dui faucibus est, id finibus risus arcu in velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam mattis volutpat efficitur. Phasellus venenatis turpis nibh, auctor tincidunt diam dictum non. Vestibulum tincidunt interdum efficitur. Integer cursus aliquet blandit. Donec auctor augue vitae metus faucibus, ut semper felis egestas. Nunc eu mattis lacus, non fermentum mauris. </p> <div class="div1"> <div> <div id="360-slide-1"> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 1</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> <li>Integer eleifend erat elit</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+1" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+2" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 2</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus venenatis turpis nibh</li> <li>Curabitur sit amet tortor id nisl tempus venenatis</li> <li>Integer in ex nunc</li> </ul> <a href="#">LEARN MORE</a> </div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 3</h3> <ul style="color: #3d4643;"> <li>Integer in ex nunc</li> <li>Curabitur sit amet tortor id nisl tempus venenatis</li> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus venenatis turpis nibh</li> </ul> <a href="#">LEARN MORE</a> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+3" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-1+IMG+4" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 4</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> <li>Integer eleifend erat elit</li> </ul> <a href="#">LEARN MORE</a> </div> </div> </div> </div> </div> </div> </div> <div id="operation2"> <h1 class="360_sub_titles" style="color: #214D29;"> CONTENT 2 </h1> <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. Curabitur sit amet tortor id nisl tempus venenatis. Vivamus semper, dolor sed vulputate finibus, magna dui faucibus est, id finibus risus arcu in velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <div class="div2"> <div> <div id="360-slide-2"> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 1</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+1" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+2" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 2</h3> <ul style="color: #3d4643;"> <li>Integer in ex nunc</li> <li>Curabitur sit amet tortor id nisl tempus venenatis</li> <li>Lorem ipsum dolor sit amet</li> </ul> </div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 3</h3> <ul style="color: #3d4643;"> <li>Integer in ex nunc</li> <li>Curabitur sit amet tortor id nisl tempus venenatis</li> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus venenatis turpis nibh</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+3" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-2+IMG+4" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 4</h3> <ul style="color: #3d4643;"> <li>Integer in ex nunc</li> <li>Lorem ipsum dolor sit amet</li> <li>Phasellus venenatis turpis nibh</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div id="operation3"> <h1 class="360_sub_titles" style="color: #214D29;"> CONTENT 3 </h1> <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. Integer in ex nunc. Nullam elementum eget sem et aliquam. Proin venenatis porta odio a sollicitudin. </p> <div class="div2"> <div> <div id="360-slide-3"> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 1</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+1" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+2" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 2</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Integer eleifend erat elit</li> </ul> </div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 3</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Integer eleifend erat elit</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+3" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-3+IMG+4" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 4</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div id="operation4"> <h1 class="360_sub_titles" style="color: #214D29;"> CONTENT 4 </h1> <p class="360_sub_txt" style="color: #3D4643; padding-bottom: 5%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis dui tempus, porttitor erat et, mattis odio. Integer eleifend erat elit, at vestibulum tellus egestas quis. Morbi vulputate luctus lacus ac efficitur. </p> <div class="div4"> <div id="360-slide-4"> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 1</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+1" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+2" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 2</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 3</h3> <ul style="color: #3d4643;"> <li>Maecenas sagittis dui tempus, porttitor erat et</li> <li>Integer eleifend erat elit</li> </ul> </div> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+3" width="400" /></div> </div> </div> <!--BREAK--> <div class="container first-content"> <div class="row"> <div class="col"><img src="https://via.placeholder.com/400x280.png?text=CONTENT-4+IMG+4" width="400" /></div> <div class="col"> <h3 style="color: #214d29;">SUB-TITLE 4</h3> <ul style="color: #3d4643;"> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipiscing elit</li> <li>Maecenas sagittis dui tempus, porttitor erat et</li> </ul> </div> </div> </div> </div> </div> </div>