Hier noch ein Beispiel.
Klassen sind nicht nötig, es zählt nur die Reihenfolge.
! Aber auch auf jQuery Basis!
HTML-Code:
<!doctype html>
<meta charset="utf-8">
<title>Fanello :: xhtmlforum.de</title>
<style>
.slider { padding: 0; list-style: none; overflow: hidden; background-color: gray; }
.slider div {
position: relative;
float: left;
width: 100%;
margin-bottom: -100%;
margin-left: 100%;
font-size: 2em;
padding: 2em 0;
text-align: center;
color: white;
background-color: blue;
transition: margin-left .4s ease-in .1s;
}
.slider div:first-child { background-color: green; }
.slider div:last-child { margin-bottom: 0; background-color: red; }
.slider .show { z-index: 1; margin-left: 0; }
</style>
<ul class="list">
<li>Kontakt</li>
<li>News</li>
<li>Suche</li>
</ul>
<div class="slider">
<div>Kontakt</div>
<div>News</div>
<div>Suche</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery( '.list li' ).on( 'click', function() {
$li = $(this).index();
$ta = $( '.slider' ).find( 'div' ).eq( $li );
$( $ta ).toggleClass( 'show' );
$( '.slider' ).find( 'div' ).not( $ta ).removeClass( 'show' );
});
});
</script>