-1

Ich googelte herum für eine Antwort, aber keine war noch eine Passform. Ich bin neu beim Aufbau von Webseiten. Ich baue eine Tab-Funktion, die ändert, was auf der Seite ist (Code ex von https://codepen.io/cssjockey/pen/jGzuK)Dollarzeichen ist nicht definiert

Wenn ich es in meinem versuche. Ich erhalte eine Fehlermeldung, dass '$' is undefined. Hier ist mein 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'); 
}) 

})

Ich schätze jede Hilfe zur Verfügung! Diese

Quelle

2017-08-13 TylerIlGenio

Haben erinnern Sie sich jquery aufzunehmen? Ich sehe es nicht in Ihrem Code – Dekel

Echo zu @Dekel: Jquery ist nicht enthalten. – tibetty

Bitte lesen Sie das jQuery Tutorial: https://learn.jquery.com/about-jquery/how-jquery-works/. –

ist, weil die Dollarzeichen ($) sind für jQuery library usage.

Um es in einem Projekt gehören, einfach importieren von ihrem CDN:

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

Also alles in allem Ihres <head> Tag sollte aussehen dies wie:

<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>

Quelle

2017-08-13 23:47:12

Sie sind erstaunlich! UND 14?!?! Glückwunsch! Vielen Dank! – TylerIlGenio

@TylerIlGenio Alter spielt keine Rolle, es ist nur, wie viel Sie wissen und wie gut Sie lernen können, dass das zählt. Und kein Problem, wenn es Ihre Frage beantwortet, bitte akzeptieren und upvote, wenn Sie können. –

Dollarzeichen ist nicht definiert

index.html

functions.js

Antwort

Verwandte Themen