Javascript 在同一页面上显示/隐藏多个局部视图

我有一个类似于仪表板的页面，在左侧您可以看到如下菜单项：

• 链接1
• 链接2
• 链接3

它们中的每一个都将在同一控制器中执行不同的操作

我想让每个动作都在同一个页面中呈现它的数据（在部分视图中），但我不知道这样做的“最佳”方式是什么

假设link1正在呈现一个人员列表（表）、link2统计信息（图表）和list 3的一些配置属性

我应该如何定义这一点，以便在每次单击时，主框架（左侧包含链接1-2-3的菜单栏，在共享视图中定义）保持不变，但只有中间内容（部分视图）会更改，记住链接1是一个表，链接2图表和其他控件，链接3是一组控件（文本框、下拉列表等）

我应该在每次点击时显示/隐藏div吗？这看起来/感觉有点脏？ 欢迎所有意见/建议

编辑： 这是我想要的行为（接受答案）：

---

注意：我在ASP.NET MVC项目中使用C，我更喜欢C#ASP.NET MVC解决方案（如果需要Javascript），而不是其他脚本/编码语言或框架。

这种设置应该使用PHP或Java。 另外，你可以使用JS框架，比如Angular或React，他们也可以处理它。

---

对于纯JS，您也可以使用事件（链接被单击）来更改页面，如您所愿。

您可以在链接上添加onClick处理程序：

<a onClick="handleLink1()">Link1</a>

Link1

假设右侧锁是这样的：

    <div id = "renderArea">

    </div>

这样，您就可以编写如下handleLink1（）函数：

function handleLink1(){

//Here you asign the new HTML:
Document.getElementById("renderArea").innerHTML = "<div/>";

}

函数handleLink1（）{
//在这里您可以签署新的HTML：
Document.getElementById（“renderArea”）.innerHTML=“”；
}

---

现在，您可以为每个链接编写一个函数，并根据自己的意愿重新渲染Rigth部分。

现在，我已经实现了这个答案：因为我不直接了解其他部分来实现它们

代码示例：

jQuery(function() {
 jQuery('#showall').click(function() {
  jQuery('.targetDiv').show();
 });
  jQuery('.showSingle').click(function() {
   jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

jQuery（函数（）{
jQuery（'#showall'）。单击（函数（）{
jQuery（'.targetDiv'）.show（）；
});
jQuery（'.showSingle'）。单击（函数（）{
jQuery（'.targetDiv'）.hide（）；
jQuery（'#div'+$（this.attr（'target'））.show（）；
});
});

我仍然愿意接受其他建议，特别是如果这些建议涉及部分观点，而不涉及太多其他问题。
到目前为止，谢谢大家！
我不会使用PHP、React或TypeScript，因为我不懂这些语言，但你能告诉我更多关于Javascript方法的信息吗？我无法想象这将是我设置中的唯一选项？谢谢你的反馈！请参阅和，作为许多示例中的两个。@SteveGreene感谢你提供的示例。我认为这很小对于我来说，这很复杂，我真的认为有一种更简单的方法来处理局部视图…我猜我错了：）我试过了，但点击链接什么也做不了。我的链接（…）在共享视图（layout.cshtml）中，我的函数也在共享视图中。该视图位于另一个包含局部视图的视图中。