show() Funktion scheint nicht wie erwartet zu funktionieren

Ich versuche, eine Webseite mit einem Menü auf der linken Seite und einem Inhaltsbereich auf der rechten Seite zu erstellen. Mockup Bild unten um Ihnen eine Vorstellung zu geben:show() Funktion scheint nicht wie erwartet zu funktionieren

ich jQuery UI bin zu versuchen, dies zu erreichen. Ziel ist, dass der Inhaltsbereich auf der rechten Seite basierend auf dem links ausgewählten Menüeintrag festgelegt wird. Der Bereich wird immer ein Registerkartenlayout sein, aber der Inhalt und die Anzahl der Registerkarten unterscheiden sich für jeden im linken Menü ausgewählten Eintrag. Schließlich möchte ich dies in eine ASP.NET MVC 5 App integrieren, um Benutzerberechtigungen und Rollen einzubeziehen, die beeinflussen, welche Menüelemente und Registerkarten basierend auf dem angemeldeten Benutzer sichtbar sind. Aber im Moment versuche ich einfach, das Tab-Menü zu bekommen, basierend auf dem, was ich im linken Menü anklicke, und es speziell beim Klicken auf einen bestimmten Gegenstand zu zeigen. Für die anderen wird es es wieder verstecken (ich habe noch nicht versucht, das erneute Verstecken zu implementieren, und das ist nicht Teil dieser Frage; ich möchte nur die anfängliche show() funktionieren lassen).

Also jetzt ist mein Ansatz, die Registerkarten auf der Seite bereit zu verbergen, dann verwenden Sie eine Funktion, um anzuzeigen, wenn geklickt wird, mit der jQuery show() -Funktion. Dies funktioniert jedoch nicht (versucht in Firefox und IE).

Mein Versuch ist: https://jsfiddle.net/3mo28z1t/5/

In der Geige, im JavaScript-Bereich, wenn Sie die "verstecken" auf "Show"

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

ändern Sie das Registerkarten-Menü sehen, die im Fall Sie möchten eine Vorstellung vom Layout erhalten, bevor Sie versuchen, das Problem zu beheben.

Insbesondere möchte ich die Aktion des Klickens auf "Linke Menüoption 3", um die Registerkarten anzuzeigen.

Vielen Dank.

Quelle

2016-06-09 ITWorker

'hide()' und 'show()' sind jQuery Methoden. Sie müssen sie für ein jQuery-Objekt und nicht für ein DOME-Element aufrufen - daher der Fehler in der Konsole. Bitte beachten Sie auch für zukünftige Fragen, dass Sie den Code in der Frage enthalten sollten, nur für den Fall, dass die Third-Party-Site mit Ihrer Demo –

geht, werde ich mich daran für die Zukunft erinnern. Vielen Dank für die Antworten, sie sind alle hilfreich. – ITWorker

Ich habe Ihre Fiddle up gereinigt, so dass Ihre Skripte/CSS in externen Ressourcen waren. Sie müssen zuerst das Ziel definieren und dann die Funktion mit dem Ziel aufrufen - Sie haben nicht die einzelnen Tabs ins Visier genommen (ich habe das auch nicht für Sie getan, ich weise nur darauf hin) Auch Sie können show as nicht verwenden ein Funktionsname, wie er reserviert ist.

Was ich tat ein toggle auf dem #leftmenu erstellen> li - siehe 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>

Quelle

2016-06-09 21:09:54

In Ihrem Beispiel Sie document.getElementById(target).show(); verwenden, aber .show ist ein jQuery-Methode

sollten Sie so etwas wie verwenden:

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

Sie können auch erklären, um Ihre Event-Handler anders, um das Problem in jsfiddle zu sehen (diese Show ist nicht definiert ed finden) my updated jsfiddle dass für

Quelle

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

Quelle

2016-06-09 20:46:18 NickyTheWrench

ein Fehler im Code vorhanden ist. Wenn Sie die Konsole überprüfen, heißt es ausdrücklich - show ist nicht definiert. Zeige & verstecken sind Methoden von jQuery zur Verfügung gestellt. Sie sind nicht dasselbe in Javascript.

Quelle

2016-06-09 20:46:46 Vatsal

show() Funktion scheint nicht wie erwartet zu funktionieren

Antwort

Verwandte Themen