다른 경우 탭으로 표시하고 숨기기

Question

내 홈페이지에 몇 개의 탭이 있습니다. 저는 New Joinees와 Administrators의 두 그룹으로 구성되어 있습니다. New Joinees 그룹의 일부 탭을 숨기고 싶습니다.

if else 문은 다음과 같지만 코드에 삽입 할 위치가 확실하지 않습니다.

Answer 1

toggle 버튼을 클릭하면 user.groups 변수에 따라 ul이 어떻게 바뀌 었는지 볼 수 있습니다.

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>