Basculer le texte entre plusieurs boutons

<p>Click the button to swap the text of the DIV element:</p>

<p>
  <button onclick="myFunction(this)" value="a">
    Category A
  </button>
  <button onclick="myFunction(this)" value="b">
    Category B
  </button>
</p>

<div id="myDIV">Hello</div>

function myFunction(myEle) {
  var x = document.getElementById("myDIV");
  x.innerHTML = "This is category " + myEle.value;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-toggle="tab" data-target="#cat-A-content">
Cat A
</button>
<button data-toggle="tab" data-target="#cat-B-content">
Cat B
</button>

<div class="tab-contents">
  <div class="tab active" id="cat-A-content">
    My category A contents
  </div>
  <div class="tab" id="cat-B-content">
    My category B contents
  </div>
</div>

.tab-contents .tab {
  display: none;
}
.tab-contents .tab.active {
  display: block;
}

// Native JS version
// Working Fiddle : https://jsfiddle.net/d34cbtw7/
var togglers = document.querySelectorAll('[data-toggle="tab"]');

for (var i = 0; i < togglers.length; i++) {
    togglers[i].addEventListener('click', function() {
        var tabs = document.querySelectorAll('.tab');
        for(var j = 0; j < tabs.length; j++) {
            tabs[j].classList.remove('active');
        }
        var $target = document.querySelector(this.getAttribute('data-target'));
        $target.classList.add('active');
    });
}

// jQuery version
$('body').on('click', '[data-toggle="tab"]', function(e) {
  e.preventDefault();
  // Select our target
  var $target = $($(this).data('target'));
  // Hide all tabs
  $('.tab-contents .tab').removeClass('active');
  // Show only $target tab
  $target.addClass('active');
});