2016-06-30 24 views
1

Ich habe einige Tabs auf meiner Homepage. Ich habe zwei Gruppen, New Joinees und Administratoren. Ich möchte einige Tabs für die Gruppe Neue Joinees ausblenden.Zeige und verstecke Tabs mit if sonst

Ich habe die folgende wenn else-Anweisung, aber ich bin mir nicht sicher, wo ich das in meinem Code einfügen soll.

+0

'if ("New Joinees" in user.groups)' ist wohl ein Server-Code zu sein? –

+0

@mosh ... ja richtig ... Diese Aussage kommt vom Servernamen der Gruppe. Ich denke nicht, dass der Code geändert werden muss, sondern nur irgendwo angepasst werden muss, damit er funktioniert. –

+0

Wenn dies ein Servercode ist, gibt es in jeder gängigen Sprache eine Engine, die sich darum kümmert. [php] (http://stackoverflow.com/a/722395/863110) verwende zum Beispiel '', welche Sprache benutzt du? –

Antwort

1

Sie können auf die Schaltfläche toggle klicken und sehen, wie die s basierend auf user.groups Variable ersetzt wird.

var user = { 
 
    //groups: ['New Joinees'] 
 
    groups: [] 
 
}; 
 

 
function showHide() { 
 
    document.getElementById('in').style.display = (user.groups.indexOf('New Joinees') > -1) ? 'block' : 'none'; 
 

 
    document.getElementById('not-in').style.display = (user.groups.indexOf('New Joinees') == -1) ? 'block' : 'none'; 
 
} 
 

 
showHide(); 
 

 
function toggle() { 
 
    user = { 
 
    groups: user.groups.length == 0 ? ['New Joinees'] : [] 
 
    }; 
 
    
 
    showHide(); 
 
}
<ul id="in" class="tabs"> 
 
    <li class="tab-link current tab1" datatab="tab-1">'Business System 
 
Functionality'</li> 
 
    <li class="tab-link tab2" datatab="tab-2">'Product'</li> 
 
    <li class="tab-link tab3" datatab="tab-3">'Environment 
 
Administration'</li> 
 
    <li class="tab-link tab4" datatab="tab-4">'Training'</li> 
 
    <li class="tab-link tab5" datatab="tab-5">'Release Notes'</li> 
 
</ul> 
 

 
<ul id="not-in" class="tabs"> 
 
    <li class="tab-link current tab1" datatab="tab-1">'Business System 
 
Functionality'</li> 
 
    <li class="tab-link tab2" datatab="tab-2">'Product'</li> 
 
    <li class="tab-link tab3" datatab="tab-3">'Environment 
 
Administration'</li> 
 
    <li class="tab-link tab4" datatab="tab-4">'Training'</li> 
 
    <li class="tab-link tab5" datatab="tab-5">'Release Notes'</li> 
 
    <li class="tab-link tab6" datatab="tab-6">'Architecture'</li> 
 
    <li class="tab-link tab7" datatab="tab-7">'Testing'</li> 
 
    <li class="tab-link tab8" datatab="tab-8">'System Administration'</li> 
 
    <li class="tab-link tab9" datatab="tab-9">'Site Management'</li> 
 
    <li class="tab-link tab10" datatab="tab-10">'Staging'</li> 
 
    <li class="tab-link tab11" datatab="tab-11">'RCB'</li> 
 
</ul> 
 

 
<hr /> 
 
<button onclick="toggle()">Toggle user.groups</button>

+0

Danke für Ihre Hilfe Mosh. –

+0

Mein Vergnügen :) Viel Glück .. –

Verwandte Themen