Mérei Tamás webdesigner

Tutorial: menüpontok váltása jQuery-vel

Szerző:   |   2012-09-10

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");
	});
});

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

12 hozzászólás

  1. Peti
    2014. február 23. vasárnap - 15:44

    Kedves Cyrex!

    Ennek kapcsán érdekelne a véleményed a következőről, röviden:

    Ha ehhez hasonló módszerekkel rakom be a menüpontok tartalmát akkor ugye egyetlen elérési útja van a lapnak. Így például nem hivatkozható az oldalnak azon része, ami nem alapértelmezetten megjelentített. Ha jól tudom a googlebot bele sem olvas a display: none tartalmakba, nem tudom azzal foglalkozik-e hogy ezek jquery-vel aktiválódhatnak? A lap részeinek tekinti-e.
    Nem tudom a gyakorlatban mennyire él az egy oldal egy tartalom irányelv.

    Most nem akarok itt belemászni a keresőoptimalizálás rejtelmeibe, csak abszolút alap szinten érdekel, hogy ezek nem teszik járhatatlanná a lapot?
    Illeve a fő gondom, hogy én sem tudok a lapnak egyes részeire rendesen hivatkozni.

    Tehát a kérdés:
    Mit gondolsz arról, hogy amíg a lapunk kicsi és győzzük addig kódolni statikusan, addig törekedjünk erre, és csak akkor használjunk mindenféle dinamikus dolgot, meg javascript, jquery csodákat, ha az valóban indokolt és lényeges időt takarítana meg a működtetésben?

    Köszi

    • cyrex
      2014. március 27. csütörtök - 16:29

      Ez tökéletesen így van ahogy írod. A JS mindig bonyolítja az oldalt fejlesztői és felhasználói szemmel is. Vannak esetek amikor hasznos tabokra osztani a tartalmat, ilyen lehet például egy webshopban a termékoldal, ahol külön fülekre kattintva tudod megnézni a leírást, a szállítási feltételeket, a véleményeket a termékről stb.

      Egy oldalon belüli látványos megjelenésre ott van még a parallax scrolling ami szintén nagyon látványos, de a használhatóságát illetően vannak kétségeim. Nem egyszer dolgoztam olyan projekten ahol olyan grafikus szolgáltatta a dizájnt akinek lövése nem volt arról, hogy mi az ami működik a weben és mi az ami nem. Ennek az eredménye többnyire az lett, hogy gyönyörű lett az oldal, a konverzió azonban messze elmaradt az elvárásoktól ami gyakorlatilag 100%-ban a rossz dizájnnak volt köszönhető.

      A felhasználó nem fogja keresgélni a gombokat, nem fog visszalépni regisztráció után azért, hogy belépjen, és nem fog kilométeres, szarul szerkesztett űrlapokat sem kitölteni azért, hogy végre meg tudja rendelni a cuccokat amit a kosarába tett.

      Nekem az a véleményem, hogy minél egyszerűbben kezelhető és minél letisztultabb oldalakkal tudod elérni a célodat. Ha az adott szituációban ebben segítségedre lehet egy jQuery plugin, akkor használd nyugodtan, mert arra találták ki.

  2. mctom
    2013. január 3. csütörtök - 20:43

    Egész jó tutorial!

    Mondjuk én egy iframe-t kiváltó megoldásra lennék kiváncsi. Arról halottam hogy jquery/Ajaxal megoldható hogy egy “content” divbe lehessen betölteni html oldalt, de eddig nem találtam használható tutorialt evvel a konkrét specifikummal kapcsolatban.

    ha esetleg a jelenlévők közül valaki tudd valami használhatót mondeni vagy linkelni megköszönném.

  3. KMartinR4
    2012. november 10. szombat - 21:14

    Jó, egyszerű kis módszer. De állandóan bővíteni kell, ha új oldalt hozol létre.
    Kicsit átalakítottam, és az enyém ilyen lett:

    $(document).ready(function(){
    $(‘section’).addClass(‘display’, ‘none’);
    $(‘nav button:first-child’).addClass(‘active’);
    $(‘section:first-child’).addClass(‘display’, ‘block’);

    $(‘nav button’).click(function(){
    var nav = $(this).index()+2;
    $(‘nav button’).removeClass(‘active’)
    $(‘section’).css(‘display’, ‘none’);
    $(‘nav button:nth-child(‘+(nav)+’)’).addClass(‘active’);
    $(‘section:nth-child(‘+(nav)+’)’).css(‘display’, ‘block’);
    });
    });

    Az “index()” utáni “+2” ismeretlen hibából eredendően lett berakva.

  4. Laci
    2012. október 13. szombat - 22:25

    Ezt a menüt hogyan lehet tovább bőviteni mert már próbáltam de sehogy sem ment.

  5. Laci
    2012. október 1. hétfő - 19:08

    Kedves Cyrex! Koszi a sok hasznos videot. Az lenne a kerdesem, hogy kulso tartalmat (pl. egy masik html-t) hogyan lehet betolteni? Tehat ha egy menupont kulso tartalomra mutat.

  6. nofix
    2012. szeptember 19. szerda - 15:26

    gratulálok

  7. Driftking
    2012. szeptember 11. kedd - 17:14

    Jó lett, mint mindig.

  8. Raim
    2012. szeptember 11. kedd - 14:55

    Cyrex lenne egy olyan kérdésem, hogy lehet olyat csinálni, hogy a mysqlben van egy szám, és mondjuk egy lekérdezéssel szeretném egy síkba belerakni?.

    pl:

    Sebzés: 0/100
    és így nézne ki:

    Egy zöld csík és benne fehérrel kicsivel hogy: 60/100
    ilyen csíkot szeretnék készíteni mint pl a neveldéken van stb, csak én ilyen statisztika félével.

    • danix
      2012. október 7. vasárnap - 11:50

      divben. átállítod cssben a div background szinét adhatsz rá bordert is. text color meg text align használatával kiirod kozepre h ezmegaz es kesz 😀 majd lehet h irok kodot csak mobilrok vagyok

  9. Vitéz László
    2012. szeptember 11. kedd - 11:30

    Köszönet! Nagyon jó! Régi visszajáró vagyok az oldaladra, és valahogy mindig úgy alakul, hogy az éppen aktuális problémámra rakod fel a megoldást.
    Még egyszer köszi, és gratula!

  10. Raim
    2012. szeptember 10. hétfő - 20:36

    Na nagyon fasza 🙂 Köszi a feltöltést 🙂

Hozzászólás

Legújabb hozzászólások