JS Stylewitcher

T!P-TOP · 29 August 2010

Hab nur sehr wenig Ahnung von JS... Mein switcher funzt jedenfalls nicht.

Ich hab derzeit 6 Datein auf meinen Server.

index.htm
style.js
default.css.css
style1.css.css
style2.css.css
design.css(unwichtig)

Hier der Link:
Home

Das Problem ist auf der Linken Seite in der SIdebar: Schriftgröße änder funktioniert nicht.

Das JS hab ich so ausgelagert:

HTML:

<script type="text/javascript">
$(document).ready(function() {
// Standard
$("#css-default.css").click(function() {
$("link[rel=stylesheet]").attr({href : "default.css.css"});
});
// größer
$("#css-style1.css").click(function() {
$("link[rel=stylesheet]").attr({href : "style1.css.css"});
});
// kleiner
$("#css-style2.css").click(function() {
$("link[rel=stylesheet]").attr({href : "style2.css.css"});
});
});
</script>

Und hier der HTML Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="design.css" />
<script type="text/javascript" src="style.js"></script>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container"><!--CONTAINER BEGINN-->
<div id="kopf"><h1>Nicolas Pecher</h1></div>
<div id="menu">
<ul>
<li id="aktuell"><a href="index.htm">Home</a></li>
<li><a href="uebermich.htm">Über mich</a></li>
<li><a href="webdesign.htm">Webdesign</a></li>
<li><a href="projekte.htm">Projekte</a></li>
<li><a href="tutorials.htm">Tutorials</a></li>
<li><a href="scripts.htm">Scripts</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
<div id="sidebar">
<h1>Schriftgröße</h1>//HIER BEGINNT DER TEIL UM DIE STYLES ZU SWITCHEN
<ul>
<li><a id="css-default.css" href="default.css.css">Standard</a></li>
<li><a id="css-style1.css" href="style1.css.css">Größer</a></li>
<li><a id="css-style2.css" href="style1.css.css">Kleiner</a></li>
</ul>
</div>
 
//restlicher HTML Code..........

Ich kann grad mal JS Grundlagen und selbst die nur schlecht. Könnt ihr mir bitte weiterhelfen?

jansh · 1 September 2010

1. Seite funktioniert nicht.
2. Du verwendest nicht reines Javascript, sondern jquery. Um jquery nutzen zu können, musst du natürlich das jquery-Framework implementieren. Sieht nicht so aus, als hättest du das getan? Also zumindest in den Quellcode nicht.

Füge:

Code:

[FONT=Verdana]
[/FONT]<script src="http://code.jquery.com/jquery-latest.min.js"></script>

in deinen Head ein und los geht's :-).
Auf api.jquery.com findest du übrigens die Dokumentation.

Weiterhin nimm mal den Punkt aus der ID-Definition heraus. (nimm den Unterstrich oder so).
Der Punkt ist eine Klassendefiniton in CSS und jquery liest die Zeile:
$("#css-default.css") { // ... }so:
Definiere alle Elemente der Klassen "css", die als Elternelement ein Element mit der ID "css-default" besitzen so ...

Und setz die href-Attribute des Links auf "#", sonst sollte es eigentlich einen 404-Error geben.

zB

HTML:

<a href="#" id="css-default">bla</a>

Das ganze musst du natürlich dann auch in deinem jquery-script anpassen.

JS Stylewitcher

T!P-TOP

Mitglied

jansh

Neues Mitglied

Neueste Beiträge