Получить выбранный элемент списка с событием click для тега ul (родительский)

Question

У меня есть это:

<ul class="tabs">
    <li><a href="#home">Home</a></li>
    <li><a href="#credits">Credits</a></li>
    <li><a href="#about">About</a></li>
</ul>

, и я хочу получить значение href списка нажатых элементов с помощью прослушивателя событий в теге ul, что-то вроде этого:

    $('.tabs').click(function () {
        let getClickedItem = 
    })

Answer 1

Введите этот код и из консоли, это должно быть то, что вы ищете:

$(function(){
            $(".tabs li a").click(function(e){
                e.preventDefault();
                console.log($(this).attr('href'));
            })
        })

Answer 2

Вы можете получить доступ к свойству target объекта события:

$('.tabs').click((event) => {
  console.log(event.target);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="tabs">
    <li><a href="#home">Home</a></li>
    <li><a href="#credits">Credits</a></li>
    <li><a href="#about">About</a></li>
</ul>

Это, однако, даст элемент, по которому щелкнули, который в этом случае наиболее определенно будет тегами привязки.

Вы говорите, что хотите элемент списка , по которому щелкают. Вы можете просто прикрепить прослушиватель событий непосредственно к ним:

$('.tabs li').click(function () {
  console.log('click', this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="tabs">
    <li><a href="#home">Home</a></li>
    <li><a href="#credits">Credits</a></li>
    <li><a href="#about">About</a></li>
</ul>