tab切换

好记性不如烂笔头 希望每天能简单记录工作中遇到的，让自己快速成长起来

 html部分代码，css样式略过了。。。。。。

 <div class="tab-panel" id="deptItem">

                  <div class="tab-title">

                    <ul>

                      <li class="active" tag="dept1" >A部门</li>

                      <li tag="dept2">B部门</li>

                    </ul>

                  </div>

                  <div class="tab-body">内容</div>

</div>

js代码：

//窗口切换

  initWindows()

 

$('body').on('click', '#deptItem .tab-title ul>li', function () {

    var $index = $(this).attr('tag')//获取到tag值

    console.log('---->', $index)

    $(this).addClass('active').siblings().removeClass('active')

    if ($index === 'dept1') {

      $('#a').attr('style', 'opacity: 1;')//显示和隐藏 也可以display：block

      $('#b').attr('style', 'opacity: 0;')//display:none，如果是原有样式display：flex 那么切换时的样式就改变了

    } else {

      $('#b').attr('style', 'opacity: 1;')

      $('#a').attr('style', 'opacity: 0;')

    }

  })

})

})