dollar sign is not defined

Question

I googled around for an answer but none have been a fit yet. I am new to website building. I am building a tab feature that changes what is on the page (Code ex from https://codepen.io/cssjockey/pen/jGzuK)

When I try it in mine. I get an error stating that '$' is undefined. Here is my 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');
})

})

I appreciate any help available!

Did you remember to include jquery? I don't see it in your code — Dekel, Aug 13 '17 at 23:45
Please read the jQuery tutorial: https://learn.jquery.com/about-jquery/how-jquery-works/ . — Felix Kling, Aug 13 '17 at 23:49

score 3 · Accepted Answer · answered Aug 13 '17 at 23:47

This is because the dollar sign ($) is for jQuery library usage.

To include it in your project, simply import it from their CDN:

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

So all in all your <head> tag should look like this:

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

@TylerIlGenio Age doesn't matter, it's only how much you know and how well you can learn that matters. And no problem, if it answered your question please accept and upvote if you can. — Mingle Li, Aug 13 '17 at 23:52

dollar sign is not defined

index.html

functions.js

1 Answers1