title: JavaScript Uncaught ReferenceError: jQuery is not defined; Uncaught ReferenceError: $ is not defined
body: <p>This is my fiddle, <a href="http://jsfiddle.net/4vaxE/35/" rel="nofollow noreferrer">http://jsfiddle.net/4vaxE/35/</a></p>
  
  <p>It work fine in my fiddle.</p>
  
  <p>However, when I transfer it to dreamweaver, it can't work. And I found this two error in my coding.</p>
  
  <ol>
  <li>Uncaught ReferenceError: jQuery is not defined </li>
  <li>uncaught referenceerror $ is not defined</li>
  </ol>
  
  <p>I had read before the article related to this two error, and tried to solve according to the method provided, however, it still not working, how can I solve this?</p>
  
  <p>Here is my full coding in dreamweaver</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="buttons" style="background-color: rgba(0,0,0,.8);"&gt;
      &lt;a class="button" id="showdiv1"&gt;Div 1&lt;/a&gt;
      &lt;a class="button" id="showdiv2"&gt;Div 2&lt;/a&gt;
      &lt;a class="button" id="showdiv3"&gt;Div 3&lt;/a&gt;
      &lt;a class="button" id="showdiv4"&gt;Div 4&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="div1"&gt;1&lt;/div&gt;
      &lt;div id="div2"&gt;2&lt;/div&gt;
      &lt;div id="div3"&gt;3&lt;/div&gt;
      &lt;div id="div4"&gt;4&lt;/div&gt;
  &lt;/div&gt;
  &lt;script language="JavaScript" type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;script language="JavaScript" type="text/javascript"&gt;
  var selectedEffect="explode";
  var options = { percent: 100 };
  $('#showdiv1').click(function () {
      $('div[id^=div]').hide();
  
      $('#div1').show( selectedEffect, options, 500, callback );
  });
  $('#showdiv2').click(function () {
      $('div[id^=div]').hide();
      $('#div2').show( selectedEffect, options, 500, callback );
  });
  
  $('#showdiv3').click(function () {
      $('div[id^=div]').hide();
      $('#div3').show( selectedEffect, options, 500, callback );
  });
  
  $('#showdiv4').click(function () {
      $('div[id^=div]').hide();
      $('#div4').show( selectedEffect, options, 500, callback );
  });
  
  function callback() {
        setTimeout(function() {
          $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
        }, 1000 );
      };
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  .button {
      cursor:pointer;
      display:inline-block;
      margin:10px;
      clip: rect(auto,auto,auto,auto);
  }
  
  #div1 {
      background:aqua;
      padding:20px;
      width:100px;
      text-align:center;
      display:none;
  }
  #div2 {
      background:blue;
      padding:20px;
      width:100px;
      text-align:center;
      display:none;
  }
  #div3 {
      background:orange;
      padding:20px;
      width:100px;
      text-align:center;
      display:none;
  }
  
  #div4 {
      background:green;
      padding:20px;
      width:100px;
      text-align:center;
      display:none;
  }
  a {
      color:aqua;
      -webkit-filter: grayscale(1.0);
  }
  a:hover {
      color:red;
      -webkit-filter: grayscale(0.0);
  }
  &lt;/style&gt;
  </code></pre>