datein-mit-ajax-holen.php
Quell Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Homepage von Basti1012 = ,Hauptmenü </title>
<style>
*{
margin:0;
padding:0;
}
body {
width:100% !important;
font-size: 20px;
display:flex;
flex-direction:column;
}
nav {
width:100%;
}
nav ul {
margin: 0;
padding: 10px;
list-style: none;
border:1px solid black;
box-shadow: 0 0 20px black;
transition: all 200ms linear;
text-align:center;
}
ul:hover {
border-bottom-color: blue;
box-shadow: 0 0 40px blue;
transition: all 200ms linear;
}
nav ul li {
display: inline-block;
padding: 5px;
}
nav span{
color: black;
border-bottom:0px solid transparent;
transition: all 150ms linear;
}
nav span:hover {
color: blue;
border:2px solid blue;
transition: all 150ms linear;
}
main{
margin-top:20px;
padding:50px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="datein-mit-ajax-holen.php">Home</a></li>
<li><span data-href="loesungen/index.php?loesungen&name=test-inhalt.php">test-inhalt 1</span></li>
<li><span data-href="loesungen/index.php?loesungen&name=test-inhalt2.php">test-inhalt 2</span></li>
<li><span data-href="loesungen/index.php?loesungen&name=test-inhalt3.php">test-inhalt 3</span></li>
</ul>
</nav>
<main>
</main>
<script>
$('span').click(function(){
link=$(this).attr('data-href');
$.ajax({
type: 'GET',
url: link,
success: function(data){
$('main').html(data);
}
});
});
</script>
</body>
</html>