我正在尝试创建一个网页，左侧是菜单，右侧是内容区域。下面的模型图片给你一个想法:
我正在使用 jQuery UI 来尝试完成此操作。目标是根据左侧选择的菜单项设置右侧的内容区域。该区域将始终是选项卡式布局，但对于从左侧菜单中选择的每个元素，选项卡的内容和数量将有所不同。最终，我想将其集成到 ASP.NET MVC 5 应用程序中，以包含用户授权和 Angular 色，这些 Angular 色会影响基于登录用户可见的菜单项和选项卡。但是现在，我只是想根据我在左侧菜单上单击的内容来显示选项卡菜单，并在单击一个特定元素时专门显示它。对于其他人，它会再次隐藏它(我还没有尝试实现重新隐藏，这不是这个问题的一部分；我只是想让初始的 show() 工作)。
所以现在我的方法是隐藏页面上的选项卡准备好，然后使用函数在单击时显示它，使用 jQuery show() 函数。但是，这不起作用(在 firefox 和 IE 中试过)。
我的尝试是:https://jsfiddle.net/3mo28z1t/5/
在 fiddle 的 javascript 部分，如果将“隐藏”更改为“显示”
$("#tabsuseradmin").hide();
如果您想在尝试解决问题之前了解布局，您将看到选项卡菜单。
具体来说，我想要单击“左侧菜单项 3”以显示选项卡的操作。
谢谢。
最佳答案
我清理了您的 fiddle ，以便您的脚本/CSS 位于外部资源中。您必须首先定义目标，然后使用目标调用函数 - 您没有针对各个选项卡(我也没有为您完成此操作，我只是指出来)您也不能使用 show as一个函数名，作为它的保留。
我所做的是在 #leftmenu>li 上创建一个 toggle - 请参阅 fiddle
$(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();
});#leftmenu {
display: inline-block;
}
#tabsuseradmin {
display: inline-block;
margin-right: 10px;
}<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>关于javascript - show() 函数似乎没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37735498/