Question

浏览stackoverflow，我认为这是使用各种IDE的非常流行的主题，但是不适合我的需求。

我正在使用一个具有多个文件的单页应用程序（使用：html，javascript，css）：main content，main header，main footer，index，{ {1}}，stlye，top。 side将显示内容，具体取决于在边栏中单击哪个项，Main content，并且边栏列表取决于从side

单击哪个顶条项目

选择一个topbar元素并显示适当的侧边栏工作正常，但是在此步骤之后，如何根据单击的侧边栏项将不同的信息获取到主要内容中

边栏功能的示例在这里：http://balloob.github.io/react-sidebar/example/responsive_example.html

因此，如果我单击top，某些内容将加载到主舞台如果Mock menu item 0，则加载不同的内容。。。。如果Mock menu item 1，则加载第n个内容

当我单击侧边栏项目时，我想在主舞台上显示html表

我通过将以下代码放入Mock menu item n文件中来尝试以下代码：

main content

，然后从<script> function showContent() { var x = document.getElementById("table"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>调用函数，如下所示：

side

这只会创建一个名为<div id="CV" class="dynamic-content"><li onclick="showContent()" class="side-bar-item"><a class="side-link" href="website_name">LINK</a></li></div>的空白页

Answer 1

当然，因为您有一个指向website_name的链接。

您应该在onclick元素中设置<a>事件。即便如此，您仍需要停止默认操作，导航到链接的href。

HTML：

<div id="CV" class="dynamic-content">
  <li class="side-bar-item">
    <a class="side-link" href="#" onclick="showContent(event)">LINK</a>
  </li>
</div>

JS：

function showContent(ev) {
  (ev||event).preventDefault();
  ...the rest of the function
}

使用onlick属性时，应以{em>其中一个参数的形式发送event（不一定是第一个参数，它取决于您的函数的参数）来使用preventDefault()，如图所示，这就是 crossbrowser 的方式（Chrome和Firefox的行为与此不同）。

单击侧边栏项目时如何更改主要内容

1 个答案: