如何使用JQuery选择整个< li>标签并使其成为链接? [英] How do I use JQuery to select a whole <li> tag and make it a link?

问题描述

我正在尝试使用<ul>创建新闻列表摘要部分，并希望使整个<li>可点击.我想先链接它在<li>中找到的URL，以便在未启用JavaScript时仍可访问...我的HTML是:-

I'm trying to create a news list summary section using <ul> and would like to make the whole <li> clickable. I'd like to use to first link it finds in the <li> as the URL so it remains accessible when JavaScript is not enabled...My HTML is:-

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

因此，基本上，当用户将鼠标悬停在整个面板上时，不仅在<h4>标记上还有整个<li>的翻转……而是将<h4>标记中包含的URL用作链接.

So basically when the user hovers over the whole panel, there is a rollover on the whole <li> not just the <h4> tag...but use the URL contained in the <h4> tag as the link...

我希望我能明智地解释这一点...我想我在那里很困惑:)

I hope I explained that sensibly...I think I confused myself there :)

欢呼

亚当

推荐答案

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

顺便说一句，您只能使用HTML/CSS(没有JavaScript)实现相同的功能.但这是另一个问题.

BTW, you can implement the same functionality with HTML/CSS only (without JavaScript). But this is another question.

这篇关于如何使用JQuery选择整个< li>标签并使其成为链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！