Question

我在编码方面很陌生，试图教育自己，因为我很感兴趣。所以，对不起，如果这是一个有点愚蠢的问题，或者没有那么具体或不是真的正确......

在我的“练习网站”上，我有一些导航链接，指的是不同的innerHTML内容（如不同的页面）。我使用'onClick'事件让它们显示出来，例如：

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

它可以完美地处理文本，但我的问题是我不知道如何使用图像。因此，当我点击图像时，我想被重定向到那个innerHTML页面，就像我用基于文本的按钮做的那样。我试着像这两种方式那样做，但都没有。

<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

我已经更新了你想要的答案。您需要将divs 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 Gist指向我在JSFiddle上根据您的特定用例创建的一些示例（Stack Overflow不允许我直接发布指向JSFiddle的链接而不包含代码，但它更容易跟随/完全实验的jsfiddle）：

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内容？

3 个答案: