4

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

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

所以基本上当用户将鼠标悬停在整个面板上时，整个面板都会发生翻转，<li>而不仅仅是<h4>标签……而是使用标签中包含的 URL<h4>作为链接……

我希望我能明智地解释一下……我想我在那里搞糊涂了：）

干杯

亚当

4

3 回答 3

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

顺便说一句，您可以仅使用 HTML/CSS（不使用 JavaScript）实现相同的功能。但这是另一个问题。

于 2009-03-30T04:58:41.643 回答
0

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

于 2009-04-02T18:55:49.120 回答
0

对于不太以 jQuery 为中心的方法。

如果您将 li 的内容包装在 <a> 中并在 a 上显示：块，您将获得整个 li 可点击。

编辑 - 在 < > 中使用标题a无效，但没有理由不将 h 标签换成 < p> 或类似标签并将样式应用于它们。

<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>
于 2009-03-30T10:55:38.790 回答