js-tab选项卡

  

   *{

    font-family: simhei;

   }

   .tab-group{

    padding: 1em 0em;

   }

   .tab-group>a{

    padding: 1em 2em;

    color: #666;

    text-decoration: none;

   }

   .tab-group>.active{

    padding: 1em 2em;

    background: #999;

    color: #fff;

   }

   .content-group{

    width: 31.7%;

    height: 10em;

    background: #999;

    color: #fff;

   }

   .content-group>.content-item{

    display: none;

   }

   .content-group>.active{

    display: inline-block;

   }

   电脑

   手机

   平板

   联想

   小米

   苹果

 document.querySelector(".tab-group").addEventListener('click',function(event){

  var target = event.target;

  //点击选项

  if(target.tagName === 'A' && ~target.className.indexOf('tab-item')){

   event.preventDefault();

   if(~target.className.indexOf('active')){

    return;

   }

   var href = target.getAttribute('href');//获取点击的目标标志

   //TODO 切换选项

   var activeTab = document.querySelector(".tab-group>.active");

   activeTab.className = activeTab.className.replace(' active', '');

   target.className = target.className + ' ' + "active";

   //TODO 选项对应的内容切换

   var activeContent = document.querySelector('.content-group>.active');

   activeContent.classList.remove('active');

   var contentElem = document.getElementById(href);

   contentElem.classList.add("active");

  }

 },false);