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

我正在尝试创建一个网页，其左侧的菜单和右侧的内容区域。下面样机图片，给你一个想法：show（）函数似乎没有按预期工作

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

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

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

在小提琴，在JavaScript部分，如果你改变了“躲”到“秀”

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

，你会看到的选项卡菜单，万一您想在解决问题之前先了解布局。

具体来说，我需要单击“左侧菜单项3”来显示选项卡。

谢谢。

来源

2016-06-09 ITWorker

'隐藏（）'和'显示（）'是jQuery方法。您需要在jQuery对象上调用它们，而不是DOMElement - 因此控制台中出现错误。另外，请注意，对于将来的问题，您应该在问题中包含代码，以防万一带有演示的第三方网站出现故障 –

我会记住这一点。谢谢大家的回复，他们都很有帮助。 – ITWorker

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

什么我做的是建立在一个#leftmenu 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>

来源

2016-06-09 21:09:54

在您使用document.getElementById(target).show();你的榜样，但.show是一个jQuery方法

你应该使用类似：

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

您也可以声明事件处理程序不同，以避免在jsfiddle中看到的问题（该显示不是定义ED），看到my updated jsfiddle为

来源

2016-06-09 20:45:02 user3

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


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

    });

Updated Fiddle

来源

2016-06-09 20:46:18 NickyTheWrench

。在你的代码中的错误。如果您检查控制台，它具体说 - show没有被定义。显示& hide是由jQuery提供的方法。它们在JavaScript中不一样。

来源

2016-06-09 20:46:46 Vatsal

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

回答

相关问题