Mutare continut in fata in functie de link

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
Skeptic
Mesaje: 8

Mutare continut in fata in functie de link

Salut
Am o problema la o pagina web, as vrea cand dau click pe "Noutati EEI" sa imi apara "Content2" deasupra de "Content1" si invers , si daca am mai multe contenturi sa se intample la fel in functie de linkul accesat, dupa cum se vede in imaginea de la aceasta adresa, URL: s15.postimage.org/ee7kfslkb/Untitled_1.jpg
Vreo idee cum sa fac sau exista vreun tutorial despre asa ceva ?
MarPlo Mesaje: 4343
Salut
Daca ai deja mai multe continuturi in pagina, fiecare in element /tag HTML separat, si vrei sa muti un anumit continut la inceput, se poate asa:
- Asociezi la fiecare link ID-ul unui tag cu continut. Apoi, cu jQuery preiei elementul asociat link-ului apasat, il stergi, si il adaugi la inceput inainte de celelalte continuturi, cu functia jQuery prependTo().
Dupa cum poti vedea daca testezi acest cod (trebuie sa ai libraria cu functii jQuery in "jquery.js", apoi il adaptezi dupa cum stii la site-ul tau):

Cod: Selectaţi tot

<html>
<head>
<title>Exemplu pe marplo.net/forum/</title>
<script src="jquery.js" type="text/javascript"></script>
<style>
body {background:#ededfe;}
#menu span {
 cursor:pointer;
 text-decoration:underline;
}
#articole div {
 margin:8px auto;
background:#f0f1fe;
 border:1px solid blue;
 padding:3px;
}
</style>
</head>
<body>
<div id="menu">
 <span rel="cnt1">Content 1</span> / <span rel="cnt2">Content 2</span> / <span rel="cnt3">Content 3</span>
</div>
<div id="articole">
 <div id="cnt1">Content 1: Free web programming courses: www.coursesweb.net/</div>
 <div id="cnt2">Content 2: Cursuri, Jocuri, anime: marplo.net/</div>
 <div id="cnt3">Content 3: Viata-i gand, gandu-i din viata.</div>
</div>

<script><!--
$('#menu span').click(function(){
  var cnt = $('#'+ $(this).attr('rel'));
  cnt.remove();
  cnt.prependTo('#articole');
});
//-->
</script>
</body>
</html>

Subiecte similare