Wie kann ich JQuery verwenden, um wählen Sie eine ganze <li> tag und machen es zu einem link?

Ich versuche zu schaffen, eine news-Liste Zusammenfassung Abschnitt mit <ul> und möchte das ganze <li> anklickbar. Ich möchte zum ersten link findet er in der <li> wie die URL an, damit es erreichbar bleibt, wenn JavaScript nicht aktiviert ist...Mein HTML ist:-

            <h3>Regional news</h3>
            <ul>
                <li class="alt clickable">
                    <h4><a href="/dave.htm">Fusce porta varius eros</a></h4>
                    <h5>22 Feb 2009</h5>
                    <p>Donec bibendum, mauris at vulputate vestibulum, nulla odio eleifend sem, in adipiscing orci neque sit amet ipsum.</p>
                </li>
                <li class="clickable">
                    <h4><a href="/dave.htm">Praesent turpis tellus, sagittis eu, molestie ac, posuere id, quam</a></h4>
                    <h5>18 Feb 2009</h5>
                    <p>Aliquam mollis. Aliquam erat volutpat. Nulla ultricies ullamcorper magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit rhoncus dui.</p>
                </li>
                <li class="alt clickable">
                    <h4><a href="/dave.htm">Vivamus libero est, pulvinar vitae, dignissim ut, mollis non, tellus</a></h4>
                    <h5>24 Feb 2009</h5>
                    <p>Morbi quis felis. Nunc hendrerit nibh porttitor leo. Aenean ut ipsum sit amet est feugiat bibendum. Vivamus adipiscing purus sed ipsum.</p>
                </li>                                     
            </ul>    
            <p class="moreregionalnews"><a href="#">View more regional news</a></p>

Also im Grunde, wenn der Benutzer schwebt über die ganze Tafel, es ist ein rollover über die gesamte <li> nicht nur die <h4> tag...aber Nutzung der URL, die im <h4> - tag als link...

Ich hoffe, ich erklärte, dass vernünftig...ich glaube, ich verwirrt mich da 🙂

Cheers

Adam

InformationsquelleAutor | 2009-03-30
  1. 18
    //when the page is loaded..
$(function() {
    //make the cursor over <li> element to be a pointer instead of default
    $('li.clickable').css('cursor', 'pointer')
    //iterate through all <li> elements with CSS class = "clickable"
    //and bind onclick event to each of them
    .click(function() {
        //when user clicks this <li> element, redirect it to the page
        //to where the fist child <a> element points
        window.location = $('a', this).attr('href');
        return false;
    });
});

    BTW, können Sie implementieren die gleiche Funktionalität mit HTML/CSS (ohne JavaScript). Aber das ist eine andere Frage.

    • Ich möchte hinzufügen, dass CSS über jQuery ( ... ) wenn die person nicht JavaScript aktiviert haben, sollte es nicht ein Zeiger (mit Angabe der Interaktivität)
    • Sie nicht brauchen, um es zu ändern :zunächst als attr() gibt das Attribut an die erste bereits; die meisten prägnant $('a', this).attr('href') ist, was ich verwenden würde
    • guter Punkt.
    • alex ist ein guter Punkt
    • Sie hat mir wirklich geholfen - tausend Dank! Ich habe versucht, den falschen Weg entlang - $('a', this).klicken Sie auf() - und das hat nichts, für einige seltsame Grund.
    InformationsquelleAutor Konstantin Tarkus
  2. 0

    Weniger jQuery-zentrierten Ansatz.

    Wenn du ein wrap-der Inhalt der li innerhalb der <a> und display: block auf, den Sie erhalten würde, die ganze li anklickbar.

    Bearbeiten - Verwendung von überschriften in den <a> nicht Valide ist, aber es gibt keinen Grund nicht zu tauschen, die h-tags für <p> oder ähnliches und Stile anwenden, um Sie.

    <style type="text/css">
.clickable a
{
     display: block;
}
</style>

<li class="alt clickable">
     <a href="/dave.htm">
     <h4>Fusce porta varius eros</h4>
     <h5>22 Feb 2009</h5>
     <p>Donec bibendum, mauris at vulputate vestibulum, nulla odio eleifend sem, in adipiscing orci neque sit amet ipsum.</p>
     </a>
</li>
    • Sie können nicht einbetten "h1" etc. Elemente in "a" elemtn
    • Ein browser gerendert wird, aber es wird nicht überprüfen, IIRC.
    • Wahr wäre es nicht überprüfen, aber dann semantisch könnten Sie überdenken mit mehreren überschriften in einer Liste zu zeigen, Datum etc sowieso. Funktioniert die Technik, um die Anforderungen zu erfüllen.
    InformationsquelleAutor Tristan Warner-Smith
  3. 0

    $(li).text.append (""+[- Link.n]+"")

    InformationsquelleAutor adardesign
Schreibe einen Kommentar