如何将 div id 传递到 url

Question

我有一个小项目，其中有不同的消息。我给每个新闻一个 div id。请在这里查看演示：demo。在当前页面中，我只显示了一小部分新闻。当您单击此新闻时，应打开另一个页面，该页面将显示您单击的完整新闻。我在想我是否可以获取 div id 并将其传递到 url 所以我可以用它来识别用户点击的新闻。或者有没有其他方法来识别用户点击的新闻？任何帮助。谢谢 这是我的代码：

<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>

Answer 1

如果可能的话，您应该只让生成 HTML 的服务器端代码为您处理这些问题。让它将 ID 注入 URL 以及插入 div 元素。

我会避免走客户端路线，但话虽如此，这并非不可能。

我推荐使用 jQuery。你基本上必须在你的文档中找到所有相关的链接，并对它们应用一个点击处理程序，它会在链接中查找 div 并读取 id 属性并将其附加到链接 url。

类似的东西：

$(function(){
  $('a').click(function(){
     var divId = $(this).find('div.toggleNews').attr('id');
     document.location.href = $(this).attr('href') + divId;
  });
});

请注意，此代码未经测试，但应该会给您一个想法......

Answer 2

我假设每个href 都是您网站中的新闻，所以编造了一些东西。我使用悬停作为事件，您可能想要更改它：

$('a').each(function() {
    $(this).hover( function() {
        console.log($(this).children().first().attr('id'));
    },function() {
        console.log("Bye");
})
})

Console.log 会在 Firefox 中记录 id，你可以使用 id 来制作你的 ajax get 请求。