单击图像时如何更改 innerHTML 内容？

Question

我在编码方面还很陌生，因为我很感兴趣，所以正在努力自学。所以，很抱歉，如果这个问题有点愚蠢、不够具体或不太正确...

在我的 "practicing site" 上，我有一些导航链接，它们指的是不同的 innerHTML 内容（如不同的页面）。我使用 'onClick' 事件让它们出现，例如：

<div class="nav" onClick="changeNavigation('a')">menu</div>

它可以完美地处理文本，但我的问题是我不知道如何处理图像。因此，当我单击图像时，我希望被重定向到该 innerHTML 页面，就像我使用基于文本的按钮所做的那样。我试着用这两种方式来做，但是 none 成功了。

<img src="picture.png" onClick="changeNavigation('a')" />

<div onClick="changeNavigation('a')"><img src="picture.png"></div>

是否可以使用图像和 'onClick' 事件来实现？或者我还能怎么做？

顺便说一句，这是我用来显示 innerHTML 的脚本：

<script>
    function changeNavigation(id) {
        document.getElementById('main').innerHTML = document.getElementById(id).innerHTML
    }
</script>

我也尝试用这种方式为我的图像添加一个显示 'main' 的 ID，但没有结果。

<img id="main" onClick="changeNavigation('f')" src="picture.png" />

你能帮帮我吗？我将不胜感激任何答案，因为我已经对此进行了搜索，但没有找到任何可以帮助解决我的问题的东西，我现在真的被困住了。

（对不起，如果我的英语不是最好的，那不是我的母语。）

Answer 1

我已经根据您的需要更新了我的答案。您需要将要显示的 div id 作为用于 onclick 的函数的参数。下面是示例。

var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

.main_div{text-align:center; background: #00C492; padding:20px; width: 400px;}
.inner_div{background: #fff; margin-top:20px; height: 100px;}
.buttons a{font-size: 16px;}
.buttons a:hover{cursor:pointer; font-size: 16px;}
img {cursor:pointer}

<div class="main_div">
<div class="buttons">
<img src="http://www.clker.com/cliparts/J/g/2/D/p/I/one-hi.png" width="50px"  onclick="toggleVisibility('Menu1');">  <img src="http://www.clker.com/cliparts/E/x/J/x/m/z/blue-number-two-hi.png" width="50px" onclick="toggleVisibility('Menu2');"> 
<img src="http://www.clker.com/cliparts/L/H/T/b/g/N/three-md.png" width="50px" onclick="toggleVisibility('Menu3');"> 
<img src="http://www.clker.com/cliparts/v/G/G/A/D/s/four-md.png" width="50px" onclick="toggleVisibility('Menu4');"> 
</div>
<div class="inner_div">
<div id="Menu1">I'm container one</div>
<div id="Menu2" style="display: none;">I'm container two</div>
<div id="Menu3" style="display: none;">I'm container three</div>
<div id="Menu4" style="display: none;">I'm container four</div>
</div>
</div>

Answer 2

您可以将所有部分保留为 #main 的子部分，并在单击部分按钮时有选择地显示它们。例如，

HTML

<nav>
  <button type="button" data-index=0>Show one</button>
    <button type="button" data-index=1>Show two</button>
    <button type="button" data-index=2>Show three</button>
</nav>
<main id="main">
  <section>One</section>
  <section class="hidden">Two</section>
  <section class="hidden">Three</section>
</main>

CSS

.hidden {
  display: none;
}

JavaScript

const buttons = Array.from(document.querySelectorAll('button'));
const contentBlocks = Array.from(document.querySelectorAll('section'));

function hideSections (arr) {
  arr.forEach(a => {
    a.classList.add('hidden');
  });
}

function showSection (index, sections) {
  // Just a basic check, not exhaustive by any stretch
  if (index !== undefined && sections !== undefined) {
    hideSections(sections);
    sections[index].classList.remove('hidden');
  }
}

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const contentBlocks = Array.from(document.querySelectorAll('section'));
    const index = button.getAttribute('data-index');
    showSection(index, contentBlocks);
  });
});

显然，您必须根据您的用例调整选择器，但是 Here's a pen

Answer 3

这是一个 GitHub 要点，指向我根据您的特定用例在 JSFiddle 上创建的一些示例（Stack Overflow 不允许我 post 直接链接到 JSFiddle 而无需在此处包含代码，但完全在 JSFiddle 中遵循 along/experiment 更容易）：

https://gist.github.com/andresn/f100386f06ee28e35bd83c62d9219890

更高级的东西：

理想情况下，您会使用所谓的事件委托，而不是向每个锚点添加一个 onclick（DRY = 不要重复自己在编程时始终牢记在心，KISS = 保持简单愚蠢） .这是解释事件委托的资源： https://davidwalsh.name/event-delegate

您甚至可以通过预加载所有图像来更进一步，以便在用户首次加载页面时在幕后加载它们： https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

单击图像时如何更改 innerHTML 内容？

How can i change the innerHTML content when clicking on an image?

html

image

onclick

innerhtml