子菜单，使 div 出现 [重复]

Question

我有一个这样的页面 在左侧有一个像这样的子菜单：

<div id="submenu1">Menu 1</div>
<div class="submenu2">Menu 2</div>

在右侧，我有与每个菜单相关联的内容窗口，如下所示

<div id="menuwindo1">Window associated with menu 1</div>
<div id="menuwindo2">Window associated with menu 2</div>

我们的目标是，当我们点击 Menu 1 div（左侧）时，它会显示相关的窗口，当我们点击另一个菜单 div 时，它会显示该窗口，同时让另一个消失。

老实说，我不知道该怎么做……有什么建议吗？

我试图在其他帖子上找到它，但其他问题太具体或给出的答案不起作用。

Answer 1

我已经演示了如何使用 jQuery 实现侧子菜单导航栏和主内容窗口并在单击时切换内容。希望，它会有所帮助。

$(document).ready(function() {
  $("#submenu2").click(function() {
    $("#window1").hide();
    $("#window2").show();
  });
  $("#submenu1").click(function() {
    $("#window2").hide();
    $("#window1").show();
  });
});

.menu-navbar {
  width: 20%;
  height: 100vh;
  background: red;
  float: left;
}

#submenu1,
#submenu2 {
  cursor: pointer;
  background: white;
  border:1px solid black;
}

.window {
  height: 100vh;
  background: gray;
  text-align: center;
}

#window1 {
  background: yellow;
}

#window2 {
  background: green;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-navbar">
  <div id="submenu1">Menu 1</div>
  <div id="submenu2">Menu 2</div>
</div>
<div class="window">
  <div id="window1">Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content of submenu1Content
    of submenu1Content of submenu1</div>
  <div id="window2">Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2Content of submenu2</div>
</div>