darth_haribo
Grünschnabel
Hallo, ich habe eine Frage, ich würde gerne wissen, wie ich mit jQuery .load() wieder meinen alten #content laden kann, hier mein Code:
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<meta charset="UTF-8">
<title>show/hideperonlick</title>
</head>
<body>
<div id="content">
<header>
<section class="wrapper">
<nav>
<div class="lr">
<a href="https://startseite.com">Startseite</a>
<a href="https://tiere.com">Tiere</a>
<a href="https://standorte.com">Standorte</a>
<a href="https://FAQ.com">Hilfe</a>
<a href="https://Kontakt.com">Kontakt</a>
<a href="#" class="logIn">Login</a>
</div>
<div class="logo">
<img src="logo.png" class="logo"/>
</div>
<div class="clear"></div>
<div class="menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$(".buttontest").click(function(){
$('#content').load('mobile/index.html #content');
});
});
</script>
</nav>
<div class="clear"></div>
</section>
</header>
<main>
<section class="wrapper">
<article>
<div class="content-container">
<div class="left">
<div class="img"></div>
</div>
<div class="right">
<div class="text">
<h1></h1>
<p></p>
</div>
<div class="buttons">
<button class="affe-btn">Affe</button>
<button class="loewe-btn">Löwe</button>
<button class="giraffe-btn">Giraffe</button>
<div class="clear"></div>
</div>
<button class="buttontest">Tausch</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="obj.js"></script>
</article>
<div class="clear"></div>
</section>
</main>
<footer>
<p>Copyright by top concepts GmbH</p>
</footer>
</div>
</body>
</html>
Die HTML Datei im mobile Ordner:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen"/>
</head>
<body>
<div id="content">
<header>
<section class="wrapper">
<nav>
<div class="oben">
<div class="logo">
<img src="logo.png" class="logo"/>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$(".buttontest").click(function(){
$('#content').load('Mobil/index.html #content');
});
});
</script>
<div class="kreuz">
<button class="buttontest">Tausch</button>
</div>
</div>
<div class="clear"></div>
</nav>
</section>
</header>
<main>
<section class="wrapper">
<article>
<div class="links">
<a href="https://startseite.com">Startseite</a><br>
<br><a href="https://tiere.com">Tiere</a><br>
<br><a href="https://standorte.com">Standorte</a><br>
<br><a href="https://FAQ.com">Hilfe</a><br>
<br><a href="https://Kontakt.com">Kontakt</a><br>
</div>
<a href="javascript:history.back();">previous</a>
</article>
</section>
</main>
</div>
</body>
</html>
Schonmal vielen Dank, für die Hilfe
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<meta charset="UTF-8">
<title>show/hideperonlick</title>
</head>
<body>
<div id="content">
<header>
<section class="wrapper">
<nav>
<div class="lr">
<a href="https://startseite.com">Startseite</a>
<a href="https://tiere.com">Tiere</a>
<a href="https://standorte.com">Standorte</a>
<a href="https://FAQ.com">Hilfe</a>
<a href="https://Kontakt.com">Kontakt</a>
<a href="#" class="logIn">Login</a>
</div>
<div class="logo">
<img src="logo.png" class="logo"/>
</div>
<div class="clear"></div>
<div class="menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$(".buttontest").click(function(){
$('#content').load('mobile/index.html #content');
});
});
</script>
</nav>
<div class="clear"></div>
</section>
</header>
<main>
<section class="wrapper">
<article>
<div class="content-container">
<div class="left">
<div class="img"></div>
</div>
<div class="right">
<div class="text">
<h1></h1>
<p></p>
</div>
<div class="buttons">
<button class="affe-btn">Affe</button>
<button class="loewe-btn">Löwe</button>
<button class="giraffe-btn">Giraffe</button>
<div class="clear"></div>
</div>
<button class="buttontest">Tausch</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="obj.js"></script>
</article>
<div class="clear"></div>
</section>
</main>
<footer>
<p>Copyright by top concepts GmbH</p>
</footer>
</div>
</body>
</html>
Die HTML Datei im mobile Ordner:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen"/>
</head>
<body>
<div id="content">
<header>
<section class="wrapper">
<nav>
<div class="oben">
<div class="logo">
<img src="logo.png" class="logo"/>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$(".buttontest").click(function(){
$('#content').load('Mobil/index.html #content');
});
});
</script>
<div class="kreuz">
<button class="buttontest">Tausch</button>
</div>
</div>
<div class="clear"></div>
</nav>
</section>
</header>
<main>
<section class="wrapper">
<article>
<div class="links">
<a href="https://startseite.com">Startseite</a><br>
<br><a href="https://tiere.com">Tiere</a><br>
<br><a href="https://standorte.com">Standorte</a><br>
<br><a href="https://FAQ.com">Hilfe</a><br>
<br><a href="https://Kontakt.com">Kontakt</a><br>
</div>
<a href="javascript:history.back();">previous</a>
</article>
</section>
</main>
</div>
</body>
</html>
Schonmal vielen Dank, für die Hilfe