Hier ist jsfiddle!Wie kann ich dieses Menü optimieren?
Ich versuche, Benutzer-Seite zu machen, wo er zwischen den Seiten wechseln kann, indem er auf divs klickt. Das Problem ist, werde ich mehr als 3 divs braucht, und das ist schon sehr chaotisch ...
<div id="dviOverdivWraper">
<div class="containterBox">
<div id="leftOver" style="background-color:blue">
</div>
<div id="rightOver" style="background-color:red">
</div>
<div id="thirdOver" style="background-color:yellow">
</div>
</div>
</div>
#dviOverdivWraper {
width: 800px;
height: 400px;
margin: 0px auto;
top: 200px;
text-align:center;
}
#dviOverdivWraper .containerBox{
width: 800px;
height: 400px;
margin: 0px auto;
text-align:center;
}
#leftOver{
width: 400px;
height: 200px;
float: left;
}
#rightOver, #thirdOver{
width: 50px;
height: 200px;
float: left;
}
$("#rightOver").click(function() {
$("#leftOver").animate({
width: "50px"
}, 500, null);
$("#rightOver").animate({
width: "400px"
}, 500, null);
$("#thirdOver").animate({
width: "50px"
}, 500, null);
});
$("#leftOver").click(function() {
$("#rightOver").animate({
width: "50px"
}, 500, null);
$("#leftOver").animate({
width: "400px"
}, 500, null);
$("#thirdOver").animate({
width: "50px"
}, 500, null);
});
$("#thirdOver").click(function() {
$("#rightOver").animate({
width: "50px"
}, 500, null);
$("#leftOver").animate({
width: "50px"
}, 500, null);
$("#thirdOver").animate({
width: "400px"
}, 500, null);
});
Wie kann ich es zu optimieren, weil ich mehr als 3 divs benötigen?
http://jsfiddle.net/k9AzF/3/ –