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（）函數似乎沒有按預期工作

回答

相關問題