Как я могу создать сноску в Википедии, используя только jQuery

Question

Я хотел бы продублировать выделение сноски в Википедии из клика в тексте при цитировании исключительно в классах jQuery и CSS. Я нашел веб-страницу, которая описывает, как это сделать с помощью CSS3 , а затем решение для JavaScript для IE. Однако я хотел бы сделать это исключительно с jQuery, так как сайт, на котором я это делаю, уже содержит несколько элементов jQuery.

Я составил список процесса.

1. нажата ссылка на текст
2. Заменить класс подсветки стандартным классом сносок на теге <p> уже выделенных сносок.
3. Добавить выделение к соответствующей сноске
4. Используйте jQuery для прокрутки страницы до соответствующей сноски.

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

$('.inlineCite').click(function() {
   $('.footnoteHighlight').removeClass('footnoteHighlight').addClass('footnote');
   //add highlight to id of highlightScroll
   //scroll to footnote with matching id
});

Если бы у меня был метод, чтобы передать часть селектора в функцию и превратить его в переменную, я думаю, я мог бы выполнить ее. Скорее всего, я уверен, что один из вас, гуру, поднимет что-то, что опровергает все, что, я думаю, я сделал. Любая помощь будет принята с благодарностью, поэтому спасибо заранее.

Приветствие.

Answer 1

Я скопировал дословную разметку надстрочного индекса Википедии:

<sup class="reference" id="cite_ref-1">
    <a href="#cite_note-1">
        <span>[</span>1<span>]</span>
    </a>
</sup>

и использовал следующий jQuery:

$(".reference > a").click(function() {
    var href = $(this).attr("href");
    var $el = $(href);

    $(".ref-highlight").removeClass("ref-highlight");
    $el.addClass("ref-highlight");
});

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

Кроме того, вам не нужно программно прокручивать страницу вниз, потому что браузер обрабатывает это автоматически.

Вотполный рабочий пример: http://jsfiddle.net/andrewwhitaker/dkWJm/2/

---

Обновление: Я заметил в вашем комментарии ниже, что вы хотите анимировать прокрутку, вот как вы это сделаете:

$(".reference > a").click(function(event) {
    event.preventDefault();
    var href = $(this).attr("href");
    var $el = $(href);

    $(".ref-highlight").removeClass("ref-highlight");
    $el.addClass("ref-highlight");
    $("html, body").animate({"scrollTop": $el.offset().top}, 3000);
});

Примечания:

• В этом случае мы отменяем действие ссылки по умолчанию (с помощью event.preventDefault()), которое должно было бы перейти кэлемент с id, совпадающим с href.
• , по которому щелкнула ссылка, с помощью animate для плавной прокрутки элемента html вниз до соответствующей позиции, которая определяется с помощью offset() на целевом элементе.
• The duration Аргумент (я указал 3000) - это то, что нужно настроить, чтобы удлинить / сократить продолжительность прокрутки.

Вот пример этого: http://jsfiddle.net/andrewwhitaker/dkWJm/4/ (Обновлено для работы в IE8 / Chrome / FF 3)

Answer 2

Вот лучшая идея - используйте ссылки #hash для создания ссылок, а затем улучшите их с помощью jQuery.В вашем HTML:

<p>Here's some content <sup><a href="#footnote-1">[1]</a></sup></p>

<ul id="footnotes">
   <li id="footnote-1">Sources: a, b and c</li>
</ul>

Обратите внимание, что прокрутка будет работать с включенным JavaScript или без него, и если пользователь решит сохранить ссылку, добавив ее в закладки или скопировав в другое место, ваша страница будет работать должным образом,

Теперь мы определяем простой класс CSS для выделения выделенной сноски:

.highlight {
    background: #ddd;
}

И применяем некоторую логику JavaScript:

// Select all #hash links
$('a[href^=#]').click(function(){
    $('#footnotes li').removeClass('highlight')
        .filter(this.href).addClass('highlight');
});

Если вы хотите проверить,пользователь переходит на URL #hash, для этого можно использовать location.hash:

if(location.hash) $(location.hash).addClass('highlight');

Answer 3

Возможно, лучшим подходом было бы открыть всплывающую подсказку со ссылочными деталями, а не прыгать вверх и вниз. Простой и удобный плагин находится по адресу: http://livereference.org В дополнение к чтению пользовательской ссылки он может автоматически извлекать подробности публикации из заданного ISBN или PubMed ID.