Блог

Главная - Вопросы по программированию - вкладки jquery — хотите использовать более одного раза на одной странице

вкладки jquery — хотите использовать более одного раза на одной странице

#javascript #html #jquery #jquery-ui-tabs

#javascript #HTML #jquery #jquery-ui-tabs

Вопрос:

Я использовал jquery-ui для реализации вкладок на одной странице. Однако мне нужно использовать его более одного раза на одной странице.

 <div id="tabs">
            
                <ul class="top-part">
                    <li><a href="#fragment-1">1</a></li>
                    <li><a href="#fragment-2">2</a></li>
                    <li><a href="#fragment-3">3</a></li>                            
               </ul>
        
                <div id="fragment-1" class="ui-tabs-panel">
                       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>  
                </div>
                
                <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
                        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
                
                <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
                        <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p>
                </div>      
                            

            </div>

            <br><br>


            <div id="tabs1">
            
                <ul class="top-part">
                    <li><a href="#fragment-1-1">1</a></li>
                    <li><a href="#fragment-2-1">2</a></li>
                    <li><a href="#fragment-3-1">3</a></li>                            
               </ul>
        
                <div id="fragment-1-1" class="ui-tabs-panel">
                       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>  
                </div>
                
                <div id="fragment-2-1" class="ui-tabs-panel ui-tabs-hide">
                        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
                
                <div id="fragment-3-1" class="ui-tabs-panel ui-tabs-hide">
                        <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p>
                </div>     
                            

            </div>

Вот код Jquery:

 <script type="text/javascript">
            jQuery(function() {

                var tabs = jQuery('#tabs').tabs();
        
                jQuery("#tabs .ui-tabs-panel").each(function(i){
        
                  var totalSize = jQuery(".ui-tabs-panel").size() - 1;
        
                  if (i != totalSize) {
                      next = i   2;
                      jQuery(this).append("<a href='#' class='next-tab mover' rel='"   next   "'>Next Step ></a>");
                  }
          
                  if (i != 0) {
                      prev = i;
                      jQuery(this).append("<a href='#' class='prev-tab mover' rel='"   prev   "'>< Previous Step</a>");
                  }
            
                });
        
                jQuery('.next-tab, .prev-tab').click(function() { 
                       // tabs.tabs('select', jQuery(this).attr("rel"));
                       tabs.tabs("option", "selected", jQuery(this).attr("rel"));
                       return false;
                   });
           

            });
        </script>

        <script type="text/javascript">
            jQuery(function() {

                var tabs1 = jQuery('#tabs1').tabs();
        
                jQuery("#tabs1 .ui-tabs-panel").each(function(i){
        
                  var totalSize = jQuery("#tabs1 .ui-tabs-panel").size() - 1;
        
                  if (i != totalSize) {
                      next1 = i   2;
                      jQuery(this).append("<a href='#' class='next-tab-1 mover' rel='"   next1   "'>Next Step ></a>");
                  }
          
                  if (i != 0) {
                      prev1 = i;
                      jQuery(this).append("<a href='#' class='prev-tab-1 mover' rel='"   prev1   "'>< Previous Step</a>");
                  }
            
                });
        
                jQuery('.next-tab-1, .prev-tab-1').click(function() { 
                       // tabs.tabs('select', jQuery(this).attr("rel"));
                       alert("ddfdf");
                       tabs1.tabs("option", "selected", jQuery(this).attr("rel"));
                       return false;
                   });
           

            });
        </script>

Кто-нибудь может помочь? Я попытался присвоить ID другому имени вкладки, но это не работает таким образом. Я использовал вкладки пользовательского интерфейса Jquery. У меня есть предыдущая и следующая кнопки, и я хочу, чтобы это изменяло содержимое вкладки, и я хочу использовать несколько вкладок на одной странице.

Вот ссылка со всем добавленным кодом: Ссылка

Комментарии:

1. Вам нужны кнопки «Предыдущий» и «Следующий» в вашем коде, верно?

2. @xr00tme: Да. Я могу добавить эти кнопки, используя код Jquery. Проблема только в том, что вторая вкладка не работает. Первый работает нормально. Вот ссылка со всем добавленным кодом: logistics-coordinators.com/next-prev

3. Ваши фрагменты кода не работают. Не могли бы вы объединить их во что-то, что в основном работает?

Ответ №1:

Приведенный ниже фрагмент делает то, что вы ищете.

  1. Сначала он генерирует вкладки.
  2. Затем он добавляет Previous и Next привязывает к телу каждой вкладки.
  3. Затем он прикрепляет click событие к каждому Previous и Next привязывает. Привязки выполняют предыдущий / следующий в зависимости от того, в какой набор вкладок они входят и какое тело вкладки активно. Т.Е. привязки «знают», каковы их предыдущие и следующие вкладки.

Обратите внимание, что это настроено на «ролловер», то есть, когда вы находитесь на последней вкладке и нажимаете Next , Next ссылка переходит на первую вкладку в наборе. Previous Привязка будет опрокидываться аналогичным образом.

 $(function() {
  // generate tabs
  $("#tabs, #tabs1").tabs();

  // add Previous/Next anchors to all tab bodies
  $(".ui-tabs-panel").each(function() {
    let tabsetAnchorId = $(this).parent().attr('id');
    $(this).append(`<a href='#${tabsetAnchorId}' class='prev-tab mover'>amp;< Previous Step</a>`);
    $(this).append(`<a href='#${tabsetAnchorId}' class='next-tab mover' style='float:right;'>Next Step amp;></a>`);
  });

  // attach click handler for Previous buttons
  $('.prev-tab').click(function() {
    let tabContainer = $(this).parents(".tabset");
    let maxTabNum = $(tabContainer).find("ul >li").length - 1;
    let activeTabNum = $(tabContainer).tabs("option", "active");
    console.log(activeTabNum   " of "   maxTabNum);
    if (activeTabNum <= 0) {
      $(tabContainer).tabs("option", "active", maxTabNum);
    } else {
      $(tabContainer).tabs("option", "active", activeTabNum - 1);
    }
  })

  // attach click handler for Next buttons
  $('.next-tab').click(function() {
    let tabContainer = $(this).parents(".tabset");
    let maxTabNum = $(tabContainer).find("ul >li").length - 1;
    let activeTabNum = $(tabContainer).tabs("option", "active");
    console.log(activeTabNum   " of "   maxTabNum);
    if (activeTabNum >= maxTabNum) {
      $(tabContainer).tabs("option", "active", 0);
    } else {
      $(tabContainer).tabs("option", "active", activeTabNum   1);
    }
  })
  
  // hide the Previous button on the first tab of each tabset
  $(".tabset").each(function() {
     $(this).find("a.prev-tab").first().hide();
  })
});  
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs" class="tabset">

  <ul>
    <li><a href="#fragment-1">1</a></li>
    <li><a href="#fragment-2">2</a></li>
    <li><a href="#fragment-3">3</a></li>
  </ul>

  <div id="fragment-1">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>

  <div id="fragment-2">
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>

  <div id="fragment-3">
    <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor
      ultricies tempor quam sit </p>
  </div>


</div>

<br><br>


<div id="tabs1" class="tabset">

  <ul class="top-part">
    <li><a href="#fragment-1-1">1</a></li>
    <li><a href="#fragment-2-1">2</a></li>
    <li><a href="#fragment-3-1">3</a></li>
  </ul>

  <div id="fragment-1-1" class="ui-tabs-panel">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>

  <div id="fragment-2-1" class="ui-tabs-panel ui-tabs-hide">
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>

  <div id="fragment-3-1" class="ui-tabs-panel ui-tabs-hide">
    <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor
      ultricies tempor quam sit </p>
  </div>


</div>

Комментарии:

1. Спасибо за помощь. Что я могу изменить в коде, чтобы изначально удалить кнопку «предыдущий»? например, я не хочу отображать «предыдущий», когда пользователь посещает страницу в первый раз.

2. Я внес обновление в свой пост, которое скрывает Previous кнопку на первой вкладке каждого набора вкладок. Лучше не создавать его в первую очередь, но поскольку вы спросили, как его скрыть, я добавил этот код. Если это решение работает для вас, пожалуйста, примите ответ.