меню вкладок с использованием jquery

0

Я пытаюсь создать меню вкладок без использования плагинов вкладки jquery. и я создал класс tabheader качестве меню tab.while, щелкнув его дочерний <a> класс tabed_contents показал, что я пытаюсь достичь с использованием id tabed_contents в теге привязки tab menu href, подобном этой разметке.

<ul class="tabheader">

<li class="active" ><a href="#fragment-1"><span>FAQs</span></a></li>

</ul>

<div id="fragment-1" class="tabed_contents">
aasd

</div>

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

мой jq

 $('.tabs > ul.tabheader > li > a').on('click', function() {

  var href = $(this).attr('href');
    $(href).show();
})
Теги:
tabs

3 ответа

0
Лучший ответ

Сначала вам нужно hide все divs,

$('.tabs > ul.tabheader > li > a').on('click', function() {
    $('.tabed_contents').hide();// hide previously shown containers
    var href = $(this).attr('href');
    $(href).show();// shows the div for which your tab is selected

    $('.tabs > ul.tabheader > li').removeClass('active');
    // add class to li
    $(this).closest('li').addClass('active');
});
Поделиться
  • 0
    если мне нужно добавить класс в 'li', в то время как это событие означает, как я должен это сделать ..?
  • 0
    @VikranthVivek проверьте мой обновленный ответ, как только я добавлю class active in li
Показать ещё 1 комментарий
1

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

  $('.tabed_contents').hide();

Также есть причина, почему вы не будете использовать вкладки пользовательского интерфейса jQuery?

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

Поделиться
  • 0
    чтобы сделать мой сайт быстрее, я сокращаю некоторые плагины .. поэтому я не планирую использовать jqplugins
  • 0
    Понятно, но вы, вероятно, не получите много пользы от использования пользовательского интерфейса jQuery, а также можете настроить то, что входит в плагин пользовательского интерфейса jQuery, по следующей ссылке: jqueryui.com/download
0

Поскольку вы используете привязывающий тег, вам необходимо предотвратить обновление привязки ссылки в браузере. Для этого мы можем использовать preventDefault(). Это включает в себя передачу события через вызов функции:

...'click', function(event) { ...

Затем вызов:

event.preventDefault();

На боковой ноте вы не должны использовать метод jQuery attr() чтобы вытащить ссылку href, вместо этого вы можете просто использовать this.href.

Все вместе, ваша функция будет выглядеть следующим образом:

$('.tabs > ul.tabheader > li > a').on('click', function(event) {
    /* Prevent the link event from refreshing the page. */
    event.preventDefault();

    var href = this.href;
    $(href).show();
})
Поделиться
  • 0
    Спасибо, есть ли возможность добавить или удалить классы к родительскому элементу «a» (имеется в виду «ли»)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню