javascript - 选项卡在 MVC 应用程序中不起作用

Question

在 MVC5 应用程序中，我可以查看 2 个带有 id Main 和 Zones 的选项卡以及 2 个带有关联 id Main 和 Zones 的 div:

<div class="tab-menu" data-rel="psDetails">
     <ul id="details">
       <li id="Main"><a href="#Main" >Main</a></li>
       <li id="Zones" ><a href="#Zones">Zones</a></li>
     </ul>
 </div>

<div id="Main">
    @Html.Partial("~/Views/Parts/Main/MainPart.cshtml")
</div>
<div id="Zones">
    @Html.Partial("~/Views/Parts/Zones/ZonesPart.cshtml")
</div>

当我打开页面时，两个选项卡中的代码都会显示，如果我单击“主要”或“区域”，则不会发生任何情况。你能帮我让这段代码有效吗？

Answer 1

正如 @schlingel 所写，您需要一些 javascript 来显示/隐藏 div这将监听 li 上的点击事件。

document.getElementById('main').onclick = function(e) {
  e.preventDefault();
  document.getElementById('maincontainer').style.display = 'block';
  document.getElementById('zonescontainer').style.display = 'none';
}

document.getElementById('zones').onclick = function(e) {
  e.preventDefault();
  document.getElementById('maincontainer').style.display = 'none';
  document.getElementById('zonescontainer').style.display = 'block';
}

https://jsfiddle.net/kx0mLkho/1/