jQuery Problem?!

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • jQuery Problem?!

      Hallo,

      also ich möchte nun ein bisschen jQuery ausprobieren.
      Mit Firebug funktioniert alles hervorragend. Nun möchte ich das
      in eine .js Datei schreiben. Bloss es wird nicht ausgeführt.

      Erstmal habe ich jQuery richtig eingebunden:

      Quellcode

      1. <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>


      Und die .js Datei habe ich folgend eingefügt:

      Quellcode

      1. <script type="text/javascript" src="js/js-test.js"></script>


      Das sollte alles richtig sein. Wenn ich mit Firebug die .js Datei suche finde ich es auch
      sowie den Inhalt.

      Mein .js Code ist folgender:

      Quellcode

      1. $('#box1').click(function(){
      2. $('#box1').css('background-color','black');
      3. });


      Wenn ich auf die Box klicke, soll die Box Schwarz werden.
      In FireBug funktioniert das auch, nur wenn ich das in der Datei
      haben möchte funktioniert das nicht.

      Zur Information ich Arbeite Localhost und auf Ubuntu 12.04, mit Lampp.

      PHP DOKUMENT:

      Quellcode

      1. <!DOCTYPE html>
      2. <head>
      3. <title></title>
      4. <link href="css/css.css" type="text/css" rel="stylesheet" />
      5. <link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
      6. <link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'>
      7. <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
      8. <script type="text/javascript" src="js/js-test.js"></script>
      9. </head>
      10. <body>
      11. <div id="wrapper">
      12. <div id="content">
      13. <div id="header">
      14. <p id="headerschrift">YourSite</p>
      15. <div id="nav">
      16. <ul class="ula">
      17. <a href="#"><li class="clearfloat">Home</li></a>
      18. <a href="#"><li class="clearfloat">Firma</li></a>
      19. <a href="#"><li class="clearfloat">Kunden</li></a>
      20. <a href="#"><li class="clearfloat">Links</li></a>
      21. </ul>
      22. </div>
      23. </div>
      24. <div id="inside">
      25. <div id="box1">Klick mich</div>
      26. </div>
      27. </div>
      28. <div id="footer">Copyright 2012 | Kevin D. </div>
      29. </body>
      30. </html>
      Alles anzeigen


      CSS DOKUMENT:

      Brainfuck-Quellcode

      1. /* v1.0 | 20080212 */
      2. html, body, div, span, applet, object, iframe,
      3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      4. a, abbr, acronym, address, big, cite, code,
      5. del, dfn, em, font, img, ins, kbd, q, s, samp,
      6. small, strike, strong, sub, sup, tt, var,
      7. b, u, i, center,
      8. dl, dt, dd, ol, ul, li,
      9. fieldset, form, label, legend,
      10. table, caption, tbody, tfoot, thead, tr, th, td {
      11. margin: 0;
      12. padding: 0;
      13. border: 0;
      14. outline: 0;
      15. font-size: 100%;
      16. vertical-align: baseline;
      17. background: transparent;
      18. }
      19. body {
      20. line-height: 1;
      21. }
      22. ol, ul {
      23. list-style: none;
      24. }
      25. blockquote, q {
      26. quotes: none;
      27. }
      28. blockquote:before, blockquote:after,
      29. q:before, q:after {
      30. content: '';
      31. content: none;
      32. }
      33. /* remember to define focus styles! */
      34. :focus {
      35. outline: 0;
      36. }
      37. /* remember to highlight inserts somehow! */
      38. ins {
      39. text-decoration: none;
      40. }
      41. del {
      42. text-decoration: line-through;
      43. }
      44. /* tables still need cellspacing=0 in the markup */
      45. table {
      46. border-collapse: collapse;
      47. border-spacing: 0;
      48. }
      49. /*--------------------------------------------------------*/
      50. /*-----------CSS STYLE ZURUECK SETZEN --------------------*/
      51. /*--------------------------------------------------------*/
      52. /*<-<-<-<-<-<-<-START->->->->->->*/
      53. /*Background*/
      54. body{
      55. background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
      56. background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome */
      57. background:-o-linear-gradient(top, #fff, #adf); /* Opera */
      58. background:-ms-linear-gradient(top, #fff, #adf); /* IE */
      59. background:linear-gradient(top, #fff, #adf); /* W3C Standard */
      60. }
      61. html, body{
      62. margin: 0;
      63. padding: 0;
      64. height: 100%;
      65. }
      66. #content{
      67. height: 100%;
      68. width: 1000px;
      69. border: 1px solid black;
      70. background-color: white;
      71. opacity: 40%;
      72. margin: 0 auto;
      73. border-radius: 9px;
      74. box-shadow: 0px 0px 5px black;
      75. margin-top: 20px;
      76. }
      77. #footer{
      78. text-align: center;
      79. font-size: 14px;
      80. margin-top: 5px;
      81. }
      82. #header{
      83. background-image: url(img/header.jpg);
      84. height: 100px;
      85. width: 1000px;
      86. border-radius:9px 9px 0 0 ;
      87. opacity: 90%;
      88. }
      89. #headerschrift{
      90. text-align: center;
      91. font-size: 70px;
      92. line-height: 80px;
      93. font-family: 'Dr Sugiyama', cursive;
      94. }
      95. .clearfloat{
      96. float:left;
      97. margin-left: 70px;
      98. text-align: center;
      99. margin-top: 12px;
      100. }
      101. ul{
      102. width: 500px;
      103. margin: 0 auto;
      104. }
      105. #nav{
      106. width: 1000px;
      107. height: 40px;
      108. background: #b8e1fc; /* Old browsers */
      109. background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
      110. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
      111. background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
      112. background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
      113. background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
      114. background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
      115. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
      116. position: absolute;
      117. font-family: 'Princess Sofia', cursive;
      118. font-size: 20px;
      119. }
      120. a{
      121. text-decoration: none;
      122. color: black;
      123. }
      124. a:hover{
      125. text-shadow:0px 0px 3px black;
      126. }
      127. #inside{
      128. height: 100%;
      129. margin: 60px auto 60px;
      130. width: 90%;
      131. }
      132. #box1{
      133. position:absolute;
      134. left:20px;
      135. top:20px;
      136. height:50px;
      137. width:50px;
      138. background-color:green;
      139. }
      Alles anzeigen


      JAVASCRIPT DOKUMENT

      Quellcode

      1. $('#box1').click(function(){
      2. $('#box1').css('background-color','black');
      3. });

      Vielen Dank!




      ERLEDIGT!!!!

      $(document).ready(function() { $("#box1").click(function() { $("#box1").css({"background-color" : "#000000"}); }); });
    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )