Как использовать JQuery, чтобы выделить целый тег <li>и сделать его ссылкой? - PullRequest
Новая
       10

Как использовать JQuery, чтобы выделить целый тег <li>и сделать его ссылкой?

4 голосов
/ 30 марта 2009

Я пытаюсь создать сводный раздел списка новостей, используя <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> ... но и использование ссылки, содержащейся в теге <h4>, в качестве ссылки .

Надеюсь, я объяснил это разумно ... Кажется, я запутался там:)

Приветствия

Адам

Ответы [ 3 ]

18 голосов
/ 30 марта 2009 
// 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). Но это другой вопрос.

0 голосов
/ 02 апреля 2009

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

0 голосов
/ 30 марта 2009

Для менее ориентированного на jQuery подхода.

Если бы вы обернули содержимое li в и отобразили блок на a, вы бы получили возможность щелкать весь li.

edit - Использование заголовков в <<code>a> не будет проверено, но нет причин не менять местами теги h для <<code>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>
...