使用if else显示和隐藏选项卡

时间:2016-06-30 09:01:33

标签: javascript html css if-statement

我的主页上有一些标签。我有两个小组,New Joinees和Administrators。我想隐藏New Joinees小组的一些标签。

我有以下if else语句,但我不知道在我的代码中将其插入的位置。

1 个答案:

答案 0 :(得分:1)

您可以点击toggle按钮,查看基于ul变量替换user.groups的方式。



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>
&#13;
&#13;
&#13;