单击图像后，如何将其与另一图像交换？

pgky5nke  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(211)

我正在尝试做的一些背景：
我正在制作一个页面，页面顶部有4个图标/IMG，当单击每个图标时，它下面会显示某些内容。用户可以单击任何图标来隐藏当前图标，并显示与他们单击的图标连接的内容。
到目前为止，我已经做到了这一点，但现在我正试图让图标在被点击后变为另一个图标，以显示某些内容在页面上处于活动/显示状态。
我曾经尝试过使用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>
JavaScriptHtmlcss

2条答案

按热度按时间
ecbunoof

ecbunoof1#

您可以使用eventlistener javascript api添加多个事件侦听器；您还可以更改 img 通过更改图像的 src 属性：

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">
赞(0）分享  回复(0）举报  2021-09-23
w46czmvw

w46czmvw2#

这说明了一种方法。使用数据属性存储有关元素的信息。然后，您不需要将逻辑硬编码到您的脚本中，因为您就可以使用它。对于每个图像导航项，可以添加以下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 listener，我们循环这些并设置 src （注意它不见了）是 data-src . 然后在同一循环中附加click侦听器。最后一行 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]') });
})

每次单击导航项目时，我们都会更改 src 具有 data-activesrc 在 show(e) 功能。 e 表示单击事件，单击的项目为 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;
}

        </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>
  </div>
</div>
        </div>
      </div>
    </div>
  </div>
</div>
      </div>
    </div>
  </div>
</div>
赞(0）分享  回复(0）举报  2021-09-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com