Bootstrap Tab ne fonctionne pas

Bonjour à tous,

J'essaye de mettre des tags 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. J'en touche pas une en JS. 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.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype 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>

Le code de mon JS perso: mesfonctions.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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);
};