jQuery слайд с комбинированными атрибутами

Question

Я пытаюсь указать определенный c div, содержащий ссылки, которые будут перемещаться по пользователю по всей странице.

У меня есть код:

$(document).on('click', 'a[href^="#"]', function(e) { // [id='faqNav']?
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

a[href^="#"] влияет на аккордеон у меня на странице, поэтому я пытаюсь найти способ выбрать ссылки в div у меня есть. Ссылки находятся в списке, я подумал, что дам этому списку id, надеясь, что код повлияет только на hrefs внутри него. Я попытался a[href^="#"][id='faqNav'], но это повлияло на все hrefs на странице.

Не уверен, как нацелиться на это в одиночку. Вот пример списка, на который я пытаюсь ориентироваться:

<ul id="faqNav">
<li href="#link1">A</li>
<li href="#link2">B</li>
<li href="#link3">C</li>
</ul>

Answer 1

<li> Элементы списков не принимают атрибут href, который можно использовать для <a>, <base>, <area> или <link>. Лучшая альтернатива для использования в этом случае - добавить пользовательский атрибут данных. Как и data-link в этом примере

Решение 1: следуйте вашему HTML коду

$("#faqNav li").on('click',function(e) {
    // target element id
    var id = $(this).data('link');
    console.log(id);

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="faqNav">
<li data-link="#link1">A</li>
<li data-link="#link2">B</li>
<li data-link="#link3">C</li>
</ul>

Решение 2: Обычное использование со ссылками

$("#faqNav a").on('click',function(e) {
    // target element id
    var id = $(this).attr('href');
    console.log(id);

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="faqNav">
<li><a href="#link1">A</a></li>
<li><a href="#link2">B</a></li>
<li><a href="#link3">C</a></li>
</ul>

Решение 3: Атрибут данных вместе с Ha sh

$("#faqNav a").on('click',function(e) {
    // target element id
    var id = $(this).data('link');
    console.log(id);

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="faqNav">
<li><a href="#" data-link="#link1">A</a></li>
<li><a href="#" data-link="#link2">B</a></li>
<li><a href="#" data-link="#link3">C</a></li>
</ul>

Это зависит от ваших требований к дизайну, ваших якорей документов (идентификаторов) и ваших потребностей навигации. С действительными идентификаторами вы можете использовать это для управления загрузкой вашей страницы, как в yourpage.html # link1. Таким образом, приоритет переходит к действительному HTML, тогда мы можем настроить и предотвратить значения по умолчанию ...