Question

我正在尝试创建一个左侧有菜单，右侧有内容区域的网页。下面的样机图片给你一个想法：

我正在使用jQuery UI来尝试实现这一目标。目标是根据左侧选择的菜单项设置右侧的内容区域。该区域将始终为选项卡式布局，但对于从左侧菜单中选择的每个项目，选项卡的内容和数量将不同。最后，我想将其集成到ASP.NET MVC 5应用程序中，以包含用户授权和角色，从而影响基于登录用户可见的菜单项和选项卡。但就目前而言，我只是想根据我在左侧菜单上点击的内容显示标签菜单，并在点击一个特定项目时专门显示。对于其他人，它会再次隐藏它（我还没有尝试实现重新隐藏，这不是这个问题的一部分;我只是想让初始show（）工作）。

所以现在我的方法是隐藏页面上的选项卡，然后使用jQuery show（）函数使用函数在单击时显示它。但是，这不起作用（在Firefox和IE中尝试过）。

我的尝试是：https://jsfiddle.net/3mo28z1t/5/

在小提琴中，在javascript部分，如果您将“隐藏”更改为“显示”

$("#tabsuseradmin").hide();

您将看到标签菜单，以防您在尝试解决问题之前想要了解布局。

具体来说，我想点击“左侧菜单项3”来显示标签。

谢谢。

Answer 1

在您的示例中，您使用的是document.getElementById(target).show();，但.show是一个jQuery方法

你应该使用类似的东西：

$(document.getElementById(target)).show();
$('#'+target).show();

您还可以不同地声明您的事件处理程序以避免在jsfiddle中看到的问题（该节目未定义），请参阅my updated jsfiddle了解

Answer 2

<li id="clicker" onclick="show('tabsuseradmin')">Left menu item 3</li>


$(document).ready(
    function(){
        $("#clicker").click(function () {
            $("#tabsuseradmin").show();
        });

    });

Updated Fiddle

Answer 3

您的代码中存在错误。如果你检查控制台，它特别说 - show未定义。展示＆amp; hide是jQuery提供的方法。它们在javascript中不一样。

Answer 4

我清理了你的小提琴，以便你的脚本/ css在外部资源中。你必须首先定义目标然后用目标调用函数 - 你没有针对各个标签（我也没有为你做过这个，我只是指出它）你也是不能将show用作函数名，因为它是保留的。

我所做的是在＃leftmenu＆gt; li上创建toggle - 请参阅fiddle

＆＃13;

$(function() {
   $("#tabsuseradmin").tabs();
   $("#leftmenu").menu();
 });

$('#leftmenu>li').on('click', function(){
  $("#tabsuseradmin").toggle();
});

 $(function showTab(target) {
   document.getElementById(target).show();
 });
 
 $(function hideTab(target) {
   document.getElementById(target).hide();
 });

＆＃13;

#leftmenu {
  display: inline-block;
}

#tabsuseradmin {
  display: inline-block;
  margin-right: 10px;
}

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>

    <ul id="leftmenu">
      <li>Left menu item 1</li>
      <li>Left menu item 2</li>
      <li>Left menu item 3</li>
      <li>Left menu item 4</li>
    </ul>

    <div id="tabsuseradmin">
      <ul>
        <li><a href="#tabs-1">Tab first</a></li>
        <li><a href="#tabs-2">Tab second</a></li>
        <li><a href="#tabs-3">Tab third</a></li>
      </ul>
      <div id="tabs-1">
        <p>Tab 1</p>
      </div>
      <div id="tabs-2">
        <p>Tab 2</p>
      </div>
      <div id="tabs-3">
        <p>Tab 3</p>
      </div>
    </div>


  </body>

＆＃13;

show（）函数似乎没有按预期工作

4 个答案: