탭메뉴 /탭 여러개

html

<div class="content">
  <ul class="tab-btn">
    <li><a href="#item-1" class="active">tab01</a></li>
    <li><a href="#item-2">tab02</a></li>
    <li><a href="#item-3">tab03</a></li>
    <li><a href="#item-4">tab04</a></li>
    <li><a href="#item-5">tab05</a></li>
  </ul>
</div>

<div class="tab-box">
    <div id="item-1" class="tab-cont-box item-active">
    </div>
    <div id="item-2" class="tab-cont-box">
    </div>
    <div id="item-3" class="tab-cont-box">
    </div>
    <div id="item-4" class="tab-cont-box">
    </div>
    <div id="item-5" class="tab-cont-box">
    </div>
</div>

 

scss 

.tab-cont-box{
  display:none;
  
  &.item-active{
    display:block;
  }
}

.tab-btn{
  overflow: hidden;
  
  li{
    float: left;
    text-align: center;
    
    a{
      display:block;
      margin-right:-1px;
      
      &.active{
        border:none;
      }
    }
  }
}

 

css

.tab-cont-box{display:none;}  
.tab-cont-box.item-active{display:block;}
    
.tab-btn{overflow: hidden;}  
.tab-btn li{float: left; text-align: center;}    
.tab-btn li a{display:block; margin-right:-1px;}      
.tab-btn li a.active{border:none; color:red;}

 

jquery

$(function() {

	var $tabs = $('.tab-btn a'); 
  
	$tabs.on('click', function(e) {
    
		e.preventDefault();
		  $tabs.removeClass('active');
		  $(this).addClass('active');

		$('.tab-cont-box').hide();
		$(this.hash).show();
	});

});

 

===================================javascript===================================

<div class="content">
   <ul class="tabBtn_wrap">
	<li class="is-active"><a href="#item-1" class="tabBtn"></a></li>
	<li class=""><a href="#item-2" class="tabBtn"></a></li>
   </ul>
</div>

<div class="tabWrap">
   <div id="item-1" class="tabCont" style="display: block;"></div>
   <div id="item-2" class="tabCont"></div>
</div>

ul.tabBtn_wrap li{background: #dcdcdc;}  
ul.tabBtn_wrap li.is-active{background: #4383e4;} 

.tabCont{display:none;}

  let tabList = document.querySelectorAll('.tabBtn_wrap li');
  let contents = document.querySelectorAll('.tabWrap .tabCont')
  let activeCont = '';


    for(var i = 0; i < tabList.length; i++){
      tabList[i].querySelector('.tabBtn').addEventListener('click', function(e){
        e.preventDefault();
        for(var j = 0; j < tabList.length; j++){
          tabList[j].classList.remove('is-active');
          contents[j].style.display = 'none';
        }

        this.parentNode.classList.add('is-active');

        activeCont = this.getAttribute('href');
        document.querySelector(activeCont).style.display = 'block';
      });
    }

==================================javascript==================================================

<div class="tab-wrapper">
    <ul class="tab-menu">
        <li><a href="#tab-1" class="is-active">menu1</a></li>
        <li><a href="#tab-2">menu2</a></li>
        <li><a href="#tab-3">menu3</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab-1" class="is-active">aaa</div>
        <div id="tab-2">bbb</div>
        <div id="tab-3">ccc</div>
    </div>
</div>

<div class="tab-wrapper">
    <ul class="tab-menu">
        <li><a href="#bbb-1" class="is-active">menu1</a></li>
        <li><a href="#bbb-2">menu2</a></li>
        <li><a href="#bbb-3">menu3</a></li>
    </ul>
    <div class="tab-content">
        <div id="bbb-1" class="is-active">aaa</div>
        <div id="bbb-2">bbb</div>
        <div id="bbb-3">ccc</div>
    </div>
</div>

.tab-wrapper { width:960px; margin:auto;}
.tab-menu {padding-left:0;}
.tab-menu li {float:left; list-style:none;  background:#ebebeb; margin-right:10px;}
.tab-menu:after{content:'';display:block; clear:both;}
.tab-menu li a{ color:#999; text-transform:uppercase; font-weight:bold;line-height:27px; text-decoration:none; padding:0 20px; 
    display:block;}
.tab-content div{display:none;}
.tab-content div.is-active{display:block;}

.tab-menu li a.is-active{background: #000; color:#fff;}

/*탭메뉴*/
var targetLink = document.querySelectorAll('.tab-menu a');
var tabContent = document.querySelectorAll('.tab-content > div');

for(var i=0; i < targetLink.length; i++){
    targetLink[i].addEventListener('click',function(e){
        e.preventDefault();
        var orgTarget = e.target.getAttribute('href');
        var tabTarget = orgTarget.replace('#','');

        for(var x=0; x < tabContent.length; x++){
            tabContent[x].style.display='none';
        }
        document.getElementById(tabTarget).style.display="block";

        for(var j=0; j < targetLink.length; j++){
            targetLink[j].classList.remove('is-active');
            e.target.classList.add('is-active');
        }
    });
}

 

========탭여러개=============================================================================

html

<div  id="row-1" class="container">
        <div class="tabWrap">
            <ul class="tabBtn">
                <li><a href="#" class="is-active" id="tab-1">탭메뉴</a></li>
                <li><a href="#" id="tab-2">탭메뉴</a></li>
                <li><a href="#" id="tab-3">탭메뉴</a></li>
            </ul>
            <ul class="panel">
                <li id="content-1">탭 내용1</li>
                <li id="content-2">탭 내용2</li>
                <li id="content-3">탭 내용3</li> 
            </ul>
        </div>
    </div>
  
    <div  id="row-2" class="container">    
        <div class="tabWrap">
            <ul class="tabBtn">
                <li><a href="#"  id="tab-4">탭메뉴</a></li>
                <li><a href="#" class="is-active" id="tab-5">탭메뉴</a></li>
                <li><a href="#" id="tab-6">탭메뉴</a></li>
            </ul>
            <ul class="panel">
                <li id="content-4">탭 내용4</li>
                <li id="content-5">탭 내용5</li>
                <li id="content-6">탭 내용6</li> 
            </ul>
        </div>
    </div>

css

.container {width:990px;margin:0 auto;}
.tabWrap ul{list-style:none;margin:0;padding:0;}
.tabWrap ul.tabBtn li:first-child {margin-left:0;}
.tabWrap ul.tabBtn li {float:left; margin-left:5px;}
.tabWrap ul.tabBtn li a {display:block; background:#00091a;padding:5px 10px; color:#fff; }
.tabWrap ul.tabBtn li a.is-active {background:#0055ff}
.tabWrap ul.tabBtn:after {content:""; display:block; clear:both; }
.tabWrap ul.panel li{display:none; background:#ccc;height:200px;overflow:hidden; }

jquery

$('.tabWrap').each(function(i) {
      var oTab = $(this);
      var tabIndex = $(this).find('.is-active').attr('id').match(/\d+$/);

      $(this).find('.panel').find('#content-' + tabIndex[0]).show();

      $(this).find('.tabBtn li a').click(function() {
     
          /*선택색인*/
          var tabIndex = $(this).attr('id').match(/\d+$/);
          /*타이틀*/
          oTab.find('.tabBtn li a').removeClass('is-active');
          $(this).addClass('is-active');

          /*패널*/
          oTab.find('.panel li').hide();
          oTab.find('.panel').find('#content-' + tabIndex[0]).show();

          return false;
      });

  });