zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery - Link anklicken dass neuer Text auftaucht und alter Text verschwindet

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.12.2010, 20:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.08.2010
Beiträge: 7
hasko befindet sich auf einem aufstrebenden Ast
Frage jQuery - Link anklicken dass neuer Text auftaucht und alter Text verschwindet

Hallo, ich versuche eine Website zu erstellen die nur aus einer HTML-Seite besteht, aber, wenn man einen Link anklickt dass anderer Text erscheint und der Text der vorher darin war verschwindet. Das ist der bisherige Code:
HTML-Code:
<!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>

<style>
html { overflow-y:scroll; }

body {
	width: 800px;
	height: 520px;
	margin: 0 auto;
	padding: 5px;
	position: 50%; height: 100%
	border: 1px solid black;
	-moz-border-radius: 1px;
	padding-bottom:0;
	-moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;
}
#content {
	overflow-y: scroll;
	height: 150px;
	width: 420px;
	margin: 0 auto;
	margin-top: 200px;
	margin-bottom: 30px;
}
#footer {
	text-align: center;
	color: gray;
	margin-bottom: 0;
}
#nav {
	margin-left: 150px;
}
#nav ul { list-style: none; }
#nav ul li {
	height: 20px;
	line-height: 20px;
	text-align: center;
	position: relative;
	float:left;
	padding: 5px;
	margin-left:1px;
	background: -moz-linear-gradient( bottom, #000, #fff );
}
#nav ul li:hover {
	color:white;
	background: -moz-linear-gradient( top, #000, #fff );
}
#nav ul li:nth-child(6) { display:none;}
#nav ul li:nth-child(7) { display:none;}

#nav ul li a {
	text-decoration: none;
	color: black;
}
.content-item { display:none; }
noscript { color: red; font-size:large; text-align:center; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#index-a').click(function(){$('#index').show("slow")});
	$('#konf-a').click(function(){$('#konfliktberatung').show("slow")});
	$('#med-a').click(function(){$('#mediation').show("slow")});
	$('#ueber-a').click(function(){$('#ueber-mich').show("slow")});
});
</script>
</head>

<body>

<div id="header">
<h1>Header</h1>

<div id="nav">
<ul>
	<li><a href="#" id="index-a">Home</a></li>
	<li><a href="#" id="konf-a">Konfliktberatung</a></li>
	<li><a href="#" id="med-a">Mediation</a></li>
	<li><a href="#" id="ueber-a">Über mich</a></li>
	<li><a href="#">Kontakt</a></li>
	<li></li>
	<li></li>
</ul></div>
</div>

<div id="content">

<div class="content-item" style="display:block;" id="index">
<h2>Startseite</h2>
</div>

<div class="content-item" id="konfliktberatung">
<h2>Konfliktberatung</h2>
</div>

<div class="content-item" id="mediation">
<h2>Mediation</h2>
</div>

<div class="content-item" id="ueber-mich">
<h2>Über mich</h2>
</div>

</div>

<noscript>
Bitte aktiviere JavaScript in deinem Browser umd diese Seite anzeigen zu können.
</noscript>

<div id="footer">

<p>Impressum</p>

</div>

</body>

</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.12.2010, 22:22
GN GN ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 21.11.2004
Beiträge: 182
GN befindet sich auf einem aufstrebenden Ast
Standard

so vielleicht:
Code:
$('a').click(function() {
    $('#textbox').slideToggle(300);
    $(this).text($(this).text() == 'zeigen' ? 'verstecken' : 'zeigen');
    return false;
});
GN
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
hide, jquery, jquery div, show, show hide

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hover effekt auf ganze TD zelle gandalf_hh CSS 27 13.07.2011 20:06
Float:right fehler im IE6 gertnaster CSS 9 04.01.2011 22:59
Div Float Clear usw... Ich dreh durch ;) buggix CSS 14 11.02.2010 09:42
Parent DIV soll mit der Höhe seines Childs wachsen Tekkla CSS 2 19.11.2009 19:27
layout ohne tabellen rw597678 CSS 3 23.04.2005 13:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:43 Uhr.