I have small project in which i have different news. And i am giving every news a div id.Please check the demo here:demo . In current page i have shown only small portion of news.And when you click on this news then another page should open which will show the complete news on which you click.I am thinking if i can take div id and pass it into url so that i can used it to identify news on which user has clicked.Or is there any other way to identify the news on which the user has clicked ? Any help.Thanks Here is my code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="page-head">
<img src="/admin/images/background/admin_head_bar_de.gif" border="0" alt="Fahrzeuge einfach effizient verwalten."><br>
</td>
</tr>
<tr>
<td class="welcome-page-hint">
<table width="538" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<a href="complete_news.php?id=">
<div class="welcome-rahmen lng toggleNews" id="news_269_kurz">
<p class="welcome-breadcrump">Montag, 19.05.2014</p>
<p class="welcome-subheadline">Teilnahme von MAN Top Used an der Samoter 2014</p>
<div class="newsText">
<p class="welcome-text"><img src="http://intern.autodo.de/admin/news/man-it.jpg" width="165" class="text_fixed" border="0"></p>
<p class="welcome-text">Die 29. Internationale Erd- und Bautechnik-Ausstellung Samoter fand zwischen dem 8. und 11. Mai in Verona statt und zog rund 100.000 Besucher an. Samoter ist die wichtigste italienische Messe ihrer Art, die den Themen Erdbewegung, Hochbau und Baumaschinen gewidmet ist. Zugleich ist diese Veranstaltung damit auch f? europ?chen Markt bedeutsam.</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen lng toggleNews" id="news_264_kurz">
<p class="welcome-breadcrump">Freitag, 24.01.2014</p>
<p class="welcome-subheadline">Kaufvertrag: neue Porsche-Vorlage zum Drucken!</p>
<div class="newsText">
<img src="http://intern.autodo.de/admin/news/porsche-kaufvertrag.jpg" border="0" align="right" class="img_fixed" width=60><p class="welcome-text">Ihr AMO Druckcenter bietet Ihnen ab sofort die M?chkeit, Kaufvertr? im Porsche-Design zu nutzen.</p>
<p class="page-breadcrump">AutoDo!-Team</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen lng toggleNews" id="news_265_kurz">
<p class="welcome-breadcrump">Mittwoch, 15.01.2014</p>
<p class="welcome-subheadline">AutoDo! Update: Die Eigenschaft -Unfallfahrzeug- wurde im AMO erweitert!</p>
<div class="newsText">
<p class="welcome-text">Ab sofort k?n Sie Fahrzeuge nach folgenden Kriterien kennzeichnen:</p>
<p class="highlight"><b>? Unfallfahrzeug<br>
? Unfallfrei<br>
? Keine Angabe</b></p>
<p class="page-breadcrump">AutoDo!-Team</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen krz toggleNews" id="news_262_kurz">
<p class="welcome-breadcrump">Dezember 2013</p>
<p class="welcome-subheadline">NUR OFFLINE!:<br>Machen Sie Ihre Preise fit f? Zukunft:<br>attraktive Preisregulierung mit dem neuen Preismanagement!</p>
<div class="newsText" style="display:none;">
<p class="welcome-text">Entscheiden Sie sich jetzt f? Erweiterungsmodul <b>AMO</b><i>profi!</i> und sichern Sie sich neben umfangreichen Auswertungsm?chkeiten und einem automatischen B?ncheck das brandneue Preismanagement mit folgenden Vorteilen:</p>
<p class="page-breadcrump">AutoDo!-Team</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen krz toggleNews" id="news_261_kurz">
<p class="welcome-breadcrump">Montag, 02.12.2013</p>
<p class="welcome-subheadline">Zeitsparend und einfach: Automatischer Preisschildversand mit AMO<i>profi!</i></p>
<div class="newsText" style="display:none;">
<img src="/admin/news/preisschild.jpg" border="0" align="right" width="110"><p class="welcome-text">Ab sofort k?n Sie bei Preis?erungen von Fahrzeugen <b>automatisch aktuelle Preisschilder</b> generieren und diese <b>per E-Mail</b> an die gew?en Empf?er weiterleiten! Diese Funktion ist jetzt im Erweiterungsmodul <b>AMO</b><i>profi!</i> erh?lich.</p>
<p class="page-breadcrump">AutoDo!-Team</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen krz toggleNews" id="news_260_kurz">
<p class="welcome-breadcrump">Montag, 02.12.2013</p>
<p class="welcome-subheadline">Achtung: Ge?erte Modellzuordnung von Mazda und Ford Focus!</p>
<div class="newsText" style="display:none;">
<img src="/admin/news/ford-mazda.gif" border="0" align="right" width="100"><p class="welcome-text">Laut einer aktuellen Information durch <b>mobile.de</b> ist ab dem <b>02.12.2013</b> auf Wunsch der Hersteller Mazda und Ford die Eingabe folgender Modelle per Schnittstelle nicht mehr m?ch: <b>Mazda2, Mazda3, Mazda5, Mazda6 sowie Ford Focus C-Max!</b></p>
<p class="page-breadcrump">AutoDo!-Team</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen krz toggleNews" id="news_259_kurz">
<p class="welcome-breadcrump">Mittwoch, 20.11.2013</p>
<p class="welcome-subheadline">AutoDo! Update:<br>Exportieren Sie Ihre Fahrzeugbilder zu mercedes-benz.de!</p>
<div class="newsText" style="display:none;"><p class="welcome-text"><img src="/admin/news/mb-boerse.jpg" border="0" width="70" class="img11_fixed">
<p class="welcome-text"></a>Ab sofort k?n Ihre Fahrzeugbilder direkt aus AutoDo! zur Gebrauchtfahrzeugsuche unter <a href="http://www.mercedes-benz.de">www.mercedes-benz.de</a> exportiert werden.</p>
<p class="page-breadcrump">AutoDo!-Team</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen krz toggleNews" id="news_258_kurz">
<p class="welcome-breadcrump">Mittwoch, 20.11.2013</p>
<p class="welcome-subheadline">Automatische E-Mail-Benachrichtigung ?eue Fahrzeuge im System!</p>
<div class="newsText" style="display:none;">
<p class="welcome-text"><img src="/admin/news/neueingetroffen.jpg" border="0" align="right" width="70"></a>Auf Wunsch informiert Sie Ihr AMO ab sofort t?ich per E-Mail ?eu in das System eingespielte Fahrzeuge. Somit k?n Sie diese noch schneller und gezielter vermarkten!</p>
<p class="page-breadcrump">AutoDo!-Team</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen krz toggleNews" id="news_255_kurz">
<p class="welcome-breadcrump">Dienstag, 01.10.2013</p>
<p class="welcome-subheadline">ACHTUNG: Wichtige Info zum Fahrzeugexport in die Neuwagenb? von mobile.de!</p>
<div class="newsText" style="display:none;">
<p class="welcome-text"><a href="http://suchen.mobile.de/neu/auto/" target="_blank"><img src="/admin/news/mobile-nw.jpg" border="0" align="right" width="50"></a>Es ist soweit: die mobile.de Neuwagenwelt ist online. Damit ein Fahrzeug hier angezeigt werden kann, m?folgende Kriterien beachtet werden:</p>
<p class="welcome-text" style="padding:0 0 0 20px;"><b>· </b> Ihr Account muss einmalig durch den mobile.de Support <br>
<b>f? Neuwagenwelt frei geschaltet werden</b>.*<br>
<b>· </b> Es werden <b>ausschlie?ich Lagerfahrzeuge</b> angezeigt.<br>
</p>
</div>
</div>
</a>
<a href="complete_news.php?id=">
<div class="welcome-rahmen krz toggleNews" id="news_254_kurz">
<p class="welcome-breadcrump">Donnerstag, 19.09.2013</p>
<p class="welcome-subheadline">Gelangensbest?gung: jetzt als Vorlage in Ihrem AMO Druckcenter!</p>
<div class="newsText" style="display:none;">
<p class="welcome-text"><img src="http://intern.autodo.de/admin/news/gelangens-de.gif" border="0" width="210" align="right" class="img12_fixed"></p>
<p class="welcome-text">Ab dem <b>01.10.2013</b> wird f?Verk?e im Abholfalle die Erstellung einer entsprechenden <b>Gelangensbest?gung</b> gefordert, um sicherzustellen, dass die Ware tats?lich im anderen EU-Mitgliedsstaat angekommen ist.</p>
<p class="page-breadcrump">AutoDo!-Team</p>
</div>
</div>
</td>
</tr>
</table>
</a>
You should just have the server side code which spits out the HTML take care of that for you, if possible. Have it inject the ID into the URL as well as indo the div element.
I would avoid going the client side route, but having said that, it's not impossible.
I recommend using jQuery. You basically have to find all the relevant links in your document and apply a click handler to them which looks for the div inside the link and reads the id attribute and appends it to the link url.
Something along the lines of:
$(function(){
$('a').click(function(){
var divId = $(this).find('div.toggleNews').attr('id');
document.location.href = $(this).attr('href') + divId;
});
});
Note, this code is untested but should give you an idea ....