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:
Code:
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
Code:
<script type="text/javascript" src="js/js-test.js"></script>
sowie den Inhalt.
Mein .js Code ist folgender:
Code:
$('#box1').click(function(){
$('#box1').css('background-color','black');
});
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:
Code:
<!DOCTYPE html>
<head>
<title></title>
<link href="css/css.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/js-test.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="header">
<p id="headerschrift">YourSite</p>
<div id="nav">
<ul class="ula">
<a href="#"><li class="clearfloat">Home</li></a>
<a href="#"><li class="clearfloat">Firma</li></a>
<a href="#"><li class="clearfloat">Kunden</li></a>
<a href="#"><li class="clearfloat">Links</li></a>
</ul>
</div>
</div>
<div id="inside">
<div id="box1">Klick mich</div>
</div>
</div>
<div id="footer">Copyright 2012 | Kevin D. </div>
</body>
</html>
Code:
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need cellspacing=0 in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*--------------------------------------------------------*/
/*-----------CSS STYLE ZURUECK SETZEN --------------------*/
/*--------------------------------------------------------*/
/*<-<-<-<-<-<-<-START->->->->->->*/
/*Background*/
body{
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome */
background:-o-linear-gradient(top, #fff, #adf); /* Opera */
background:-ms-linear-gradient(top, #fff, #adf); /* IE */
background:linear-gradient(top, #fff, #adf); /* W3C Standard */
}
html, body{
margin: 0;
padding: 0;
height: 100%;
}
#content{
height: 100%;
width: 1000px;
border: 1px solid black;
background-color: white;
opacity: 40%;
margin: 0 auto;
border-radius: 9px;
box-shadow: 0px 0px 5px black;
margin-top: 20px;
}
#footer{
text-align: center;
font-size: 14px;
margin-top: 5px;
}
#header{
background-image: url(img/header.jpg);
height: 100px;
width: 1000px;
border-radius:9px 9px 0 0 ;
opacity: 90%;
}
#headerschrift{
text-align: center;
font-size: 70px;
line-height: 80px;
font-family: 'Dr Sugiyama', cursive;
}
.clearfloat{
float:left;
margin-left: 70px;
text-align: center;
margin-top: 12px;
}
ul{
width: 500px;
margin: 0 auto;
}
#nav{
width: 1000px;
height: 40px;
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
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+ */
background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
position: absolute;
font-family: 'Princess Sofia', cursive;
font-size: 20px;
}
a{
text-decoration: none;
color: black;
}
a:hover{
text-shadow:0px 0px 3px black;
}
#inside{
height: 100%;
margin: 60px auto 60px;
width: 90%;
}
#box1{
position:absolute;
left:20px;
top:20px;
height:50px;
width:50px;
background-color:green;
}
Code:
$('#box1').click(function(){
$('#box1').css('background-color','black');
});
