他の場合のタブの表示と非表示

Question

私のホームページにはいくつかのタブがあります。私は2つのグループ、New JoineesとAdministratorsを持っています。私は、グループのためのいくつかのタブを非表示にしたいと思います。

私は次のif else文を持っていますが、私はこのコードをどこに挿入するのかわかりません。

Answer 1

ボタンtoggleをクリックし、に基づいて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>