jquery css funktion

S

Sebbo90

Mitglied
Hi,

ich möchte eine Tabbox realisieren, welche bei click auf einen Tab die Hintergrundgrafik verschiebt. Was man vll durch folgendes Bild besser versteht.

Grafik:
tabsz.png


Hier nun mal mein Code:

Code: 
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
 <style>
 #tabsbox {
	position:relative;
	float:left;
	width:510px;
	height:259px;
	background-color:#F00;
}

#tabs {
	background:url(images/tabs/tabs.png);
	background-repeat:no-repeat;
	bottom:16px;
	position:relative;
	height:33px;
	width:520px;
}

#tabs li {
	display:block;
	float:left;
	height:33px;
	width:130px;
}
#tabs li a {
	position:absolute;
	height:33px;
	float:left;
	width:130px;
	margin:0 0 0 -33px;
}
 </style>
 <script>
 $('ul#tabs').tabs();
	$('ul#tabs a').click(function(){
		activeTab = $(this).attr('id');
		setTab();
	});	
	function setTab () {	
		switch (activeTab) {
			case 'tab1':
				$('#tabs').css('background-position','0px -33px');
				break;
			case 'tab2':
				$('#tabs').css('background-position','0px -66px');
				break;
			case 'tab3':
				$('#tabs').css('background-position','0px -99px');
				break;
			case 'tab4':
				$('#tabs').css('background-position','0px -132px');
				break;
			default:
			break;
		}
	}
 </script>
 <div id="tabsbox">
					<ul id="tabs">
						<li><a id="tab1" href="#"></a></li>
                        <li><a id="tab2" href="2"></a></li>
                        <li><a id="tab3" href="3"></a></li>
                        <li><a id="tab4" href="4"></a></li>
					</ul>
    	<div id="tabbinhalt"></div>
    </div>

Das Problem ist, das eben bei einem Klick auf einen Tab einfach nichts passiert. Weshalb ich denke, dass das Problem im JS code liegt.

Da ich aber noch nicht so der vollprofi in Sachen js bin wollte ich hier mal fragen ob ihr den Fehler findet. Ich verzweifel fast schon.

Würde mich auf eine antwort freuen.

mfg
sebbo
 
chmee hat gesagt.:
Ich glaube, der Fehler ist, dass die Namenskonvention in jQuery für css-Eigenschaften geändert ist. Aus background-position wird backgroundPosition (camelcase).
Zum Vergrößern anklicken....

Das ist falsch. Zwar ist es richtig beim Zugriff z.b. über elemen.style.backgroundPosition, aber das liegt einfach daran, dass im Bezeichner kein Minus erlaubt.

http://api.jquery.com/css/
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css('background-color') and .css('backgroundColor').
Zum Vergrößern anklicken....


chmee hat gesagt.:
Möglicherweise würde ich der function setTab() auch den Wert activeTab übergeben, also setTab(activeTab).
Zum Vergrößern anklicken....

Da es eine globale Variable ist, ist das nicht nötig. Wäre aber schöner, das stimmt.


chmee hat gesagt.:
http://www.protofunc.com/scripts/jquery/backgroundPosition/
Zum Vergrößern anklicken....

Das Plugin hab ich auch schon verwendet, aber er will ja nur verschieben, nicht animieren.





Jetzt zum Thema:

Wenn ich deinen Code kopiere, funktioniert er. Ich hab nur zwei Kleinigkeiten geändert:

Das hier entfernt, denn du hast ja keine jQuery UI eingebungen, also gibt es auch keine tabs-Funktion. Dadurch wird der restliche Code nicht ausgeführt.
Javascript: 
$('ul#tabs').tabs();


Und ich habe das Script-Tag unterhalb des Tab-HTML verschoben. Denn vorher an der Stelle wo du den Code hast, findet "$('ul#tabs a')" keine Elemente. Du solltest aber generell den gesamten jQuery Code in die document-ready Funktion stecken.


Edit: Hier noch der Vollständigkeit halber:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Background-Position Tabs</title>
	
	<style type="text/css">
	#tabsbox {
		position:relative;
		float:left;
		width:510px;
		height:259px;
		background-color:#F00;
	}

	#tabs {
		background:url(images/tabs/tabs.png);
		background-repeat:no-repeat;
		bottom:16px;
		position:relative;
		height:33px;
		width:520px;
	}

	#tabs li {
		display:block;
		float:left;
		height:33px;
		width:130px;
	}

	#tabs li a {
		position:absolute;
		height:33px;
		float:left;
		width:130px;
		margin:0 0 0 -33px;
	}
	</style>
</head>

<body>
	<div>
		<div id="tabsbox">
			<ul id="tabs">
				<li><a id="tab1" href="#1"></a></li>
				<li><a id="tab2" href="#2"></a></li>
				<li><a id="tab3" href="#3"></a></li>
				<li><a id="tab4" href="#4"></a></li>
			</ul>
			<div id="tabbinhalt"></div>
		</div>
	</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(document).ready(function(){
		$('ul#tabs a').click(function(){
			activeTab = $(this).attr('id');
			setTab();
		}); 

		function setTab () {
			switch (activeTab) {
				case 'tab1':
					$('#tabs').css('background-position','0px -33px');
					break;
				case 'tab2':
					$('#tabs').css('background-position','0px -66px');
					break;
				case 'tab3':
					$('#tabs').css('background-position','0px -99px');
					break;
				case 'tab4':
					$('#tabs').css('background-position','0px -132px');
					break;
				default:
					break;
			}
		}
	});
	/* ]]> */
	</script>
</body>

</html>
 
Zuletzt bearbeitet:
CPoly.
(1) Naja falsch ist nicht das richtige Wort. Ich hab auch nochmal gestöbert, als String darf es "richtig" geschrieben werden., als Hash muß camelCase benutzt werden - geänderte Namenskonvention.. Richtig ist natürlich, dass der Grund das Minus ist.
Code: 
$('#Ich').css({backgroundPosition: "0 0"})
// muss camelCase sein

$('#Ich').css('backgroundPosition', '0 0');
$('#Ich').css('background-position', '0 0');
// kann camelCase sein, muß nicht

(2) stimmt, sie ist global, im Grund genommen könnte man sogar die Funktion als Solche weglassen und direkt einbinden. Es war einfach nur spät und habe Anregungen für mögliche Problemstellen geben wollen.

mfg chmee
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück