Question

在MVC5应用程序中，我在视图中有2个标签，其中包含主要和区域ad 2 div，以及相关的ID主要和区域：

<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

您可以使用jQuery在tab中实施MVC。

试试这个，

<div id="tabs">
        <ul>
            <li><a href="#Main">Main</a></li>
            <li><a href="#Zones">Zones</a></li>
        </ul>

<div id="Main">
    //main div contents
</div>

<div id="Zones">
    //zone div contents
</div>

</div>

然后在<script>中添加以下内容。

<script>
$(function () {
    $("#tabs").tabs();
})
</script>

将jQuery文件提交给您的项目。

请参阅此example。

Answer 2

正如@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/

Tab在MVC应用程序中不起作用

2 个答案: