У меня есть несколько вкладок с одинаковой структурой 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();
функции, чтобы получить результат, но не смог.
Привет, вы можете отредактировать свой html с тем, что у вас есть, например: добавить структуру других вкладок, может быть, добавить пример этого?
Не могли бы вы показать нам весь HTML-код?
@Swati Все имеют одинаковую структуру html, они автоматически создаются php. единственная разница в том, что этот <div class = "cat-tab"> его <div class = "tab-wrapper"> на самом деле. php, повторяющий одну и ту же структуру html с разными категориями. Например, Life & Style и его подкатегории, а затем переходите к другим категориям.
Ваш код для 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>
Ты такой гениальный! вы сэкономили мне время и написали кучу дополнительных кодов :) Большое вам спасибо.
Хотите подробнее объяснить, что вы подразумеваете под «управлением» вкладками?