-1

J'ai fait un tour de table pour trouver une réponse, mais aucun n'a encore été en forme. Je suis nouveau à la construction de sites Web. Je construis une fonction d'onglet qui change ce qui est sur la page (code ex de https://codepen.io/cssjockey/pen/jGzuK)le signe du dollar n'est pas défini

Quand je l'essaye dans le mien. J'ai une erreur indiquant que '$' is undefined. Voici mon code

index.html

<!DOCTYPE html> 
<html 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My Site</title> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<link href="default.css" rel="stylesheet" type="text/css" media="all" /> 
<script language="JavaScript" src="functions.js"></script> 
</head> 
<body> 
<div class="container"> 

<ul class="tabs"> 
    <li class="tab-link current" data-tab="tab-1">TabA</li> 
    <li class="tab-link" data-tab="tab-2">TabB</li> 
    <li class="tab-link" data-tab="tab-3">TabC</li> 
    <li class="tab-link" data-tab="tab-4">TabD</li> 
</ul> 

<div id="tab-1" class="tab-content current"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div> 
<div id="tab-2" class="tab-content"> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div> 
<div id="tab-3" class="tab-content"> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div> 
<div id="tab-4" class="tab-content"> 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>

functions.js

$(document).ready(function(){ 

$('ul.tabs li').click(function(){ 
    var tab_id = $(this).attr('data-tab'); 

    $('ul.tabs li').removeClass('current'); 
    $('.tab-content').removeClass('current'); 

    $(this).addClass('current'); 
    $("#"+tab_id).addClass('current'); 
}) 

})

Je vous remercie de toute aide disponible!

Source

2017-08-13 TylerIlGenio

Avez-vous pensé à inclure jquery? Je ne le vois pas dans votre code – Dekel

echo to @Dekel: jquery n'est pas inclus. – tibetty

Veuillez lire le tutoriel jQuery: https://learn.jquery.com/about-jquery/how-jquery-works/. –

En effet, le signe dollar ($) est pour jQuery library usage.

Pour l'inclure dans votre projet, il suffit d'importer de leur CDN:

<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script>

Donc dans l'ensemble de votre balise <head> devrait ressembler comme ceci:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My Site</title> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<link href="default.css" rel="stylesheet" type="text/css" media="all" /> 
<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 
<script language="JavaScript" src="functions.js"></script> 
</head>

Source

2017-08-13 23:47:12

Vous êtes incroyable! ET 14?!?! Félicitations! Je vous remercie! – TylerIlGenio

@TylerIlGenio L'âge n'a pas d'importance, c'est seulement ce que vous savez et comment vous pouvez apprendre ce qui compte. Et pas de problème, s'il a répondu à votre question s'il vous plaît accepter et upvote si vous le pouvez. –

le signe du dollar n'est pas défini

index.html

functions.js

Répondre

Questions connexes