Többen is kérdezték már hogyan lehet megoldani jQuery-vel, hogy az oldal újratöltése nélkül töltsük be az egyes menüpontok tartalmát. Itt egy faék egyszerű megoldás.

A működő kódot ide kattintva tudod megnézni.

A kód az oldal betöltődésekor elrejti az összes menüpont tartalmát a reset_menu függvény segítségével. Ezután az első menüpont kapcsolójára ráteszi az active class-t, majd megjeleníti az első menüpont tartalmát.

Az egyes menüpontokra kattintva először mindig lefut a reset_menu függvény ami eltünteti az összes menüpontot, majd azt a menüpontot jeleníti meg amelyiken a kattintás történt.

HTML forráskód


<div id="wrapper">
<ul id="menu">
<li id="menu1">elso</li>
<li id="menu2">masodik</li>
<li id="menu3">harmadik</li>
</ul>
<div id="content">
<div id="content-menu1">
<h1>elso menupont</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium erat in diam adipiscing vel eleifend nibh blandit. Nam lorem quam, dignissim et congue a, lobortis eget magna.</p>
<p>Sed tellus est, accumsan et tincidunt a, placerat eget tellus. Vestibulum bibendum tellus suscipit odio viverra at euismod dolor accumsan. Cras eget urna libero, lacinia egestas risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tincidunt erat in magna dignissim ac mattis enim dictum.</p>
</div>
<div id="content-menu2">
<h1>masodik menupont</h1>
<p>Aenean eu dui ante. Maecenas non tempor elit. Mauris iaculis molestie leo a consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis arcu urna. Nullam purus arcu, blandit quis blandit non, tempor at nisi.</p>
</div>
<div id="content-menu3">
<h1>harmadik menupont</h1>
<p>Nunc eros tortor, luctus a imperdiet vel, vehicula in enim. Aenean quis nulla eget magna facilisis adipiscing. Morbi molestie, augue sed dapibus tempor, risus mauris gravida nisl, vel iaculis nisl nisl eu lacus. Quisque vel mauris sed mi vehicula tincidunt.</p>
</div>
</div>
</div>

CSS forráskód


* {
padding: 0;
margin: 0;
border: 0;
font-family: arial;
font-size: 13px
}
body { background: #f7f3e1 }
h1 {
font-size: 20px;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
border-bottom: 1px solid #ddd
}
p {
margin: 0 0 10px 0;
line-height: 20px
}
div#wrapper {
width: 462px;
margin: 100px auto;
background: #fff;
padding: 3px;
box-shadow: 2px 2px 0 #ddd3a7
}
ul#menu {
list-style: none;
float: left
}
ul#menu li {
float: left;
cursor: pointer;
width: 150px;
text-align: center;
background: #b5cf88;
border-bottom: 4px solid #97b465;
margin: 2px;
padding: 10px 0
}
ul#menu li:hover,
ul#menu li.active {
background: #b88466;
color: #fff;
font-weight: bold;
border-color: #93654a
}
div#content {
clear: both;
padding: 10px;
color: #3b3322
}

jQuery forráskód


$(document).ready(function() {
// menu resetelese
function reset_menu() {
// #menu osszes gyerekerol levesszuk a .active class-t
$("#menu").children().removeClass("active");
// #content DIV osszes gyereket eltuntetjuk
$("#content").children().css("display","none");
}
reset_menu();
// elso menupontot megjelenitjuk
$("#content-menu1").css("display","block");
// elso menupont kapcsolojara ratesszuk az .active class-t
$("#menu1").addClass("active");
// elso menupontra kattintas
$("#menu1").click(function(){
reset_menu();
// #content-menu1 tartalmat megjelenitjuk
$("#content-menu1").css("display","block");
// elso menupont kapcsolojara ratesszuk az .active class-t
$("#menu1").addClass("active");
});
// masodik menupontra kattintas
$("#menu2").click(function(){
reset_menu();
$("#content-menu2").css("display","block");
$("#menu2").addClass("active");
});
// harmadik menupontra kattintas
$("#menu3").click(function(){
reset_menu();
$("#content-menu3").css("display","block");
$("#menu3").addClass("active");
});
});