Jquery linkging to html issue

Question

how to link this Jquery to my html page? https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js can someone help me? Iv been trying but its not working! I need to know exactly how? should I include something between my "head" tags? or body or where exactly?

the code is from code pen: https://codepen.io/anon/pen/YVZQQX?editors=0010

code:

$(".form").find("input, textarea").on("keyup blur focus", function(e) {
  var $this = $(this), label = $this.prev("label");

  if (e.type === "keyup") {
    if ($this.val() === "") {
      label.removeClass("active highlight");
    } else {
      label.addClass("active highlight");
    }
  } else if (e.type === "blur") {
    if ($this.val() === "") {
      label.removeClass("active highlight");
    } else {
      label.removeClass("highlight");
    }
  } else if (e.type === "focus") {
    if ($this.val() === "") {
      label.removeClass("highlight");
    } else if ($this.val() !== "") {
      label.addClass("highlight");
    }
  }
});

$(".tab a").on("click", function(e) {
  e.preventDefault();

  $(this).parent().addClass("active");
  $(this).parent().siblings().removeClass("active");

  target = $(this).attr("href");

  $(".tab-content > div").not(target).hide();

  $(target).fadeIn(600);
});

It works perfectly in code pen, but when I copy it, it doesn't work! Thank you

try learning the basics first. <html>**<head>**<title></title><script src="" />…</head><body><scrip>/* code calling jQuery */</script></body></html> — vv01f
– vv01f, Commented Apr 28, 2017 at 14:50

hungerstar · Accepted Answer · 2017-04-28 15:07:23Z

You need to include jQuery via a <script> tag.

JS should be loaded at the end of the page (performance reasons) unless you have a solid reason for including it in the <head>, i.e. feature detection, JS placement is not under your control (CMS etc.).

Since you're unsure of how to include JS into a web page I feel it's worth noting that you will need to include jQuery before your code.

Include JS right before </body>:

    <!-- the rest of your page -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="path/to/script.js"></script>
  </body>
</html>

Or you can include it in the <head> if you have to (usually later rather than earlier in the <head>):

<head>
  <!-- meta tags, title tag, link tags for CSS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

If you load your code in the <head> you'll probably want to wrap it $( document ).ready(); so that the code doesn't get executed right away. Why? If you try to interact with a DOM (HTML) right away that hasn't been parsed yet you'll run into problems. $( document ).ready(); will defer the execution of the code until the DOM is ready.

$( document ).ready( function () {
  // your code here
} );

$( document ).ready() is not required if JS is included at the very bottom of the page.

victor · Accepted Answer · 2017-04-28 14:49:55Z

0

put this in between the head tags of your html page

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

answered Apr 28, 2017 at 14:49

victor

8127 silver badges12 bronze badges

Collectives™ on Stack Overflow

Jquery linkging to html issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related