Tab Boostrap ne fonctionne pas

Question

franzouille09

24 Mar 2018 à 18:41

Bonjour à tous,

J'essaye de mettre des tabs bootraap sur ma page html. Ça ne fonctionne pas. J'ai vu que lorsque j'enlève mon script de bas de page ça fonctionne. Le problème c'est que j'ai besoin de ce script. Est ce que quelqu'un pourrait me faire la modification pour que ça fonctionne? Ou m'expliquer pourquoi ça ne fonctionne pas? D'avance merci belle journée.
Mon code html:


<html lang="fr">
    <head>
        <meta charset="utf-8">
                    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    </head>
    <body>
        <div class="container">
                    <div id="content">
                        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                            <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
                            <li><a href="#orange" data-toggle="tab">Orange</a></li>
                            <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
                            <li><a href="#green" data-toggle="tab">Green</a></li>
                            <li><a href="#blue" data-toggle="tab">Blue</a></li>
                        </ul>
                        <div id="my-tab-content" class="tab-content">
                            <div class="tab-pane active" id="red">
                                <h1>Red</h1>
                                <p>red red red red red red</p>
                            </div>
                            <div class="tab-pane" id="orange">
                                <h1>Orange</h1>
                                <p>orange orange orange orange orange</p>
                            </div>
                            <div class="tab-pane" id="yellow">
                                <h1>Yellow</h1>
                                <p>yellow yellow yellow yellow yellow</p>
                            </div>
                            <div class="tab-pane" id="green">
                                <h1>Green</h1>
                                <p>green green green green green</p>
                            </div>
                            <div class="tab-pane" id="blue">
                                <h1>Blue</h1>
                                <p>blue blue blue blue blue</p>
                            </div>
                        </div>
                    </div>
        </div> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
<script src="js/mesfonctions.js"></script>
        <script type="text/javascript">
                                jQuery(document).ready(function ($) {
                                    $('#tabs').tab();
                                });
                    </script>
 
        <!-- Mon script qui empeche mes tabs de fonctionner -->
        <script>
      $(document).ready(function(e) {
        onScrollInit($('.os-animation'));
        smoothScroll();
        showScroll();
        firstRuban();
        ruban();
      });
    </script>
    </body>
</html>

Voici le code JS avec mes fonctions:

function onScrollInit( items, trigger ) {
  items.each( function() {
    var osElement = $(this),
        osAnimationClass = osElement.attr('data-os-animation'),
        osAnimationDelay = osElement.attr('data-os-animation-delay');
 
    osElement.css({
        '-webkit-animation-delay':  osAnimationDelay,
        '-moz-animation-delay':     osAnimationDelay,
        'animation-delay':          osAnimationDelay
    });
 
    var osTrigger = ( trigger ) ? trigger : osElement;
 
    osTrigger.waypoint(function() {
        osElement.addClass('animated').addClass(osAnimationClass);
    },{
        triggerOnce: true,
        offset: '95%'
    });
  });
};
 
// Réduit la nav en scrollant vers le bas
$('#mainNav').affix({
    offset: {
        top: 100
    }
});
 
$('#side').affix({
    offset: {
        top: $('#side').offset().top,
        bottom: ($('footer').outerHeight(true) + $('aside').outerHeight(true)) + 100
    }
});
 
 
//Show/Hide ruban devis
function firstRuban() {
  $("#ruban").stop(true, true).delay(2000).animate({"right":'-5px'},500).removeClass('open');
};
 
function ruban() {
  $('#divTransparente').on('click', function(){
    if ($('#ruban').hasClass('open')) {
      $('#ruban').animate({
        right : '-5px'
      }, 500).removeClass('open');
    } else {
      $('#ruban').animate({
        right : -100
      }, 500).addClass('open');
    }
  });
};
 
//Smooth scroll to anchor
function smoothScroll() {
  $('a[href*=#]:not([href=#clientCarousel])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 70
        }, 500);
        return false;
      }
    }
  });
};
 
//Show scrollTop
function showScroll() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      $('#scrollup').css({right:'10px'},500);
    } else {
      $('#scrollup').css({right:'-50px'},500);
    }
  });
};
 
function copyright() {
  var theYear = new Date().getFullYear();
  $("#year").html(theYear);
};

Sujet clos

JavaScript, DOM et API Web HTML5

Tab Boostrap ne fonctionne pas