IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Bootstrap Tab ne fonctionne pas


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Femme Profil pro
    Chargé de référencement
    Inscrit en
    Mars 2018
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Chargé de référencement
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2018
    Messages : 5
    Points : 4
    Points
    4
    Par défaut 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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    };

  2. #2
    Candidat au Club
    Femme Profil pro
    Chargé de référencement
    Inscrit en
    Mars 2018
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Chargé de référencement
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2018
    Messages : 5
    Points : 4
    Points
    4
    Par défaut
    personne pour m'aider?

Discussions similaires

  1. [Bootstrap] menu deroulant ne fonctionne pas
    Par rahim01 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 06/09/2017, 11h58
  2. Menu deroulant bootstrap ne fonctionne pas
    Par Caranille dans le forum Général Conception Web
    Réponses: 2
    Dernier message: 07/12/2015, 16h23
  3. [UI] $().tabs ne fonctionne pas
    Par ctuchik dans le forum jQuery
    Réponses: 2
    Dernier message: 15/11/2014, 00h12
  4. [XL-2007] ALT + TAB ne fonctionne pas
    Par cladsam dans le forum Excel
    Réponses: 2
    Dernier message: 12/07/2012, 19h10
  5. ca ne fonctionne pas (generateur auto-incrémentant)
    Par tripper.dim dans le forum SQL
    Réponses: 7
    Dernier message: 26/11/2002, 01h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo