Как управлять несколькими вкладками с помощью jquery на одной странице, не влияя друг на друга?

У меня есть несколько вкладок с одинаковой структурой html и одним и тем же css на одной странице, и я хочу управлять ими с помощью jquery без использования дополнительных плагинов или начальной загрузки и т. д.

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

Я задал еще один вопрос здесь и ответ именно то, что я хотел, но это для простой вкладки.

Все вкладки имеют одинаковую структуру html, они автоматически создаются php. единственная разница между ними в том, что это <div class = "cat-tab"> это <div class = "tab-wrapper"> на самом деле. php, повторяющий одну и ту же структуру html для каждой категории.

Пример Life & Style и его подкатегории, а затем продолжается для каждой категории. Если на странице разрешено отображать 4 категории, то 4 вкладки будут иметь одинаковую структуру html.

1 вкладка для каждой разрешенной категории.

Вот мой код:

$(document).ready(function() {
  $(".dropdown").click(function(e) {
    e.stopPropagation();
    $(".dropdown-tab").toggleClass("active");
  });

  $(document).click(function(e) {
    if (!$(e.target).closest(".dropdown-tab").length) {
      $(".dropdown-tab").removeClass("active");
    }
  });

  $(".tabs li:not(.dropdown_menu)").click(function() {
    show_hide_tabs(this)
  });
  $(".tabs li.drop-link").click(function() {
    show_hide_tabs(this)
  });

  function show_hide_tabs(el) {
    var tab_id = $(el).attr("data-tab");
    $(".tabs li,.tab-content").removeClass("current");
    $(".dropdown-tab").removeClass("active");
    $("#" + tab_id).addClass("current");
    $(".tabs li[data-tab='" + tab_id + "']").addClass("current");
  }
});
.cat-tab {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.tabs {
  position: relative;
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-bottom: 2px solid #e44e4e;
  z-index: 1;
}

.tabs li {
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

.tabs li.current {
  background-color: #e44e4e;
  color: #fff;
}

.tabs li.tab-link:last-child {
  float: right;
}

.tab-content {
  display: none;
  background: #fff;
  padding: 15px;
}

.tab-content.current {
  display: block;
}

.tabs .dropdown-tab.active {
  display: block;
}

.tabs .dropdown {
  position: relative;
}

.tabs .dropdown-tab {
  position: absolute;
  width: 270px;
  top: 100%;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 90999;
  display: none;
}

.tabs .drop-link {
  width:100%;
  display: block;
  color: #222;
  padding: 10px 15px;
  cursor: pointer;
}

.tabs .drop-link:hover {
  background-color: #f2f2f2;
}

@media screen and (max-width: 576px) {
  .cat-tab {
    display: block;
    width:100%;
  }
}
    <div class = "cat-tab">
      <ul class = "tabs">
        <li class = "tab-link current" data-tab = "tab-1">Tab One</li>
        <li class = "tab-link" data-tab = "tab-2">Tab Two</li>
        <li class = "tab-link" data-tab = "tab-3">Tab Three</li>
        <li class = "tab-link" data-tab = "tab-4">Tab Four</li>
        <!--added here one extra class-->
        <li class = "tab-link dropdown_menu"><span class = "dropdown">View All</span>
          <ul class = "dropdown-tab">
            <li class = "drop-link" data-tab = "tab-5">Tab 5</li>
            <li class = "drop-link" data-tab = "tab-6">Tab 6</li>
            <li class = "drop-link" data-tab = "tab-7">Tab 7</li>
            <li class = "drop-link" data-tab = "tab-8">Tab 8</li>
            <li class = "drop-link" data-tab = "tab-9">Tab 9</li>
          </ul>
        </li>
      </ul>

      <div id = "tab-1" class = "tab-content current">sometext 1</div>
      <div id = "tab-2" class = "tab-content">sometext 2</div>
      <div id = "tab-3" class = "tab-content">sometext 3</div>
      <div id = "tab-4" class = "tab-content">sometext 4</div>
      <div id = "tab-5" class = "tab-content">sometext 5</div>
      <div id = "tab-6" class = "tab-content">sometext 6</div>
      <div id = "tab-7" class = "tab-content">sometext 7</div>
      <div id = "tab-8" class = "tab-content">sometext 8</div>
      <div id = "tab-9" class = "tab-content">sometext 9</div>
    </div>

Я пробовал each();, $this, find(); функции, чтобы получить результат, но не смог.

Хотите подробнее объяснить, что вы подразумеваете под «управлением» вкладками?

medelito 15.02.2023 15:32

Привет, вы можете отредактировать свой html с тем, что у вас есть, например: добавить структуру других вкладок, может быть, добавить пример этого?

Swati 15.02.2023 15:33

Не могли бы вы показать нам весь HTML-код?

Starnec 15.02.2023 15:55

@Swati Все имеют одинаковую структуру html, они автоматически создаются php. единственная разница в том, что этот <div class = "cat-tab"> его <div class = "tab-wrapper"> на самом деле. php, повторяющий одну и ту же структуру html с разными категориями. Например, Life & Style и его подкатегории, а затем переходите к другим категориям.

DLK 15.02.2023 16:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш код для jquery будет таким же, только способ получения элементов будет изменен. Таким образом, вместо прямого доступа к элементу вы можете использовать .closest() и .find(). Кроме того, id должен быть уникальным, поэтому вам нужно внести эти изменения в свой php боковой код.

Демонстрационный код:

$(document).ready(function() {
  // Show the dropdown when the "View All" link is clicked
  $(".dropdown").click(function(e) {
    e.stopPropagation(); // Prevent the event from propagating to the parent element
    $(this).closest(".cat-tab").find(".dropdown-tab").toggleClass("active");
  });

  // Hide the dropdown when the user clicks outside of it
  $(document).click(function(e) {
    if (!$(e.target).closest(".dropdown-tab").length) {
      $(".dropdown-tab").removeClass("active");
    }
  });

  //excluding other selector...
  $(".tabs li:not(.dropdown_menu)").click(function() {
    show_hide_tabs(this)
  });
  $(".tabs li.drop-link").click(function() {
    show_hide_tabs(this)
  });

  function show_hide_tabs(el) {
    var tab_id = $(el).attr("data-tab");
    var selector = $(el).closest(".cat-tab"); //here get closest outer div..
    selector.find(".tabs li,.tab-content").removeClass("current");
    selector.find(".dropdown-tab").removeClass("active");
    $("#" + tab_id).addClass("current");
    $(".tabs li[data-tab='" + tab_id + "']").addClass("current");
  }
});
.cat-tab {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.tabs {
  position: relative;
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-bottom: 2px solid #e44e4e;
  z-index: 1;
}

.tabs li {
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

.tabs li.current {
  background-color: #e44e4e;
  color: #fff;
}

.tabs li.tab-link:last-child {
  float: right;
}

.tab-content {
  display: none;
  background: #fff;
  padding: 15px;
}

.tab-content.current {
  display: block;
}

.tabs .dropdown-tab {
  display: none;
}

.tabs .dropdown-tab.active {
  display: block;
}

.tabs .dropdown {
  position: relative;
}

.dropdown-tab {
  position: absolute;
  width: 270px;
  top: 100%;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 90999;
}

.drop-link {
  display: block;
  color: #222;
  padding: 10px 15px;
  cursor: pointer;
}

.drop-link:hover {
  background-color: #f2f2f2;
}

@media screen and (max-width: 500px) {
  ul.tabs>li.dropdown {
    display: block;
  }
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = "cat-tab">
  Life Style
  <ul class = "tabs">
    <li class = "tab-link current" data-tab = "tab-1">Tab One</li>
    <li class = "tab-link" data-tab = "tab-2">Tab Two</li>
    <li class = "tab-link" data-tab = "tab-3">Tab Three</li>
    <li class = "tab-link" data-tab = "tab-4">Tab Four</li>
    <!--added here one extra class-->
    <li class = "tab-link dropdown_menu"><a href = "#" class = "dropdown">View All</a>
      <ul class = "dropdown-tab">
        <li class = "drop-link" data-tab = "tab-5">Tab 5</li>
        <li class = "drop-link" data-tab = "tab-6">Tab 6</li>
        <li class = "drop-link" data-tab = "tab-7">Tab 7</li>
        <li class = "drop-link" data-tab = "tab-8">Tab 8</li>
        <li class = "drop-link" data-tab = "tab-9">Tab 9</li>
      </ul>
    </li>
  </ul>

  <div id = "tab-1" class = "tab-content current">sometext 1</div>
  <div id = "tab-2" class = "tab-content">sometext 2</div>
  <div id = "tab-3" class = "tab-content">sometext 3</div>
  <div id = "tab-4" class = "tab-content">sometext 4</div>
  <div id = "tab-5" class = "tab-content">sometext 5</div>
  <div id = "tab-6" class = "tab-content">sometext 6</div>
  <div id = "tab-7" class = "tab-content">sometext 7</div>
  <div id = "tab-8" class = "tab-content">sometext 8</div>
  <div id = "tab-9" class = "tab-content">sometext 9</div>
</div>

<!-- for different tabs.. you need to make the id unique for now i have added -2 for each id you can change this in your php code -->
<div class = "cat-tab">
  Something ..2
  <ul class = "tabs">
    <li class = "tab-link current" data-tab = "tab-1-2">A </li>
    <li class = "tab-link" data-tab = "tab-2-2">B</li>
    <li class = "tab-link" data-tab = "tab-3-2">C</li>
    <li class = "tab-link" data-tab = "tab-4-2">D</li>
    <!--added here one extra class-->
    <li class = "tab-link dropdown_menu"><a href = "#" class = "dropdown">View All</a>
      <ul class = "dropdown-tab">
        <li class = "drop-link" data-tab = "tab-5-2">E</li>
        <li class = "drop-link" data-tab = "tab-6-2">F</li>
      </ul>
    </li>
  </ul>

  <div id = "tab-1-2" class = "tab-content current">sometext A</div>
  <div id = "tab-2-2" class = "tab-content">sometext B</div>
  <div id = "tab-3-2" class = "tab-content">sometext C</div>
  <div id = "tab-4-2" class = "tab-content">sometext D</div>
  <div id = "tab-5-2" class = "tab-content">sometext E</div>
  <div id = "tab-6-2" class = "tab-content">sometext F</div>

</div>

Ты такой гениальный! вы сэкономили мне время и написали кучу дополнительных кодов :) Большое вам спасибо.

DLK 15.02.2023 16:43

Другие вопросы по теме