Systeme d'onglet

Bonsoir,

Je suis entrain de créer un systeme d'onglet le probléme c'est que sa fonctionne jusqu'a que le contenu de la div correpondant a l'onglet disparrait mais sa n'affiche pas l'autre contenu.

Code Html

<div>
        <ul class="nav nav-tabs nav-cod">
            <li class="active"><a href="#commande">Commande (4)</a></li>
            <li><a  href="#commandecour">Commande En Cour (5)</a></li>
            <li><a href="#commandetermine">Commande Terminé (0) </a></li>
        </ul>
        <div class="tabs-contents">
            <div  class="tabs-content active" id="#commande">
                commende total
            </div>
            <div class="tabs-content" id="#commandecour" >
                commande en cour
            </div>
            <div class="tabs-content" id="#commandetermine">
                commande recus
            </div>
        </div>

Code Js

var tabs = document.querySelectorAll('.nav-tabs a')

    for (var i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click', function (e) {

            var li = this.parentNode
            var div = this.parentNode.parentNode.parentNode

            if (li.classList.contains('active')) {
                return false;
            }

            div.querySelector('.nav-tabs .active').classList.remove('active')
            li.classList.add('active')

            div.querySelector('.tabs-content.active').classList.remove('active')
            div.querySelector(this.getAttribute('href')).classList.add('active')
        })
    }

Code css

.tabs-content{
    min-height: 200px;
    width: 700px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: 110px ;
    margin-right:auto;
}

.tabs-content {
    display: none;
}

.tabs-content.active {display: block !important;}