Witam, pomoże mi ktoś edytować skrypt, ponieważ nie mogę sobie z tym poradzić? Chodzi dokładnie o to, aby do tego skryptu dopisać żeby obrazki tab-image również działały na zasadzie tab-contentu. Za każdym razem wychodzi mi tak, że obrazki działają ale tab-content już nie :/
Skrypt tabów:
jQuery(document).ready(function($) {
//dla każdego kontenera z treścią tabów dodajemy klasę js -> patrz dalej
$('.tabs-container').addClass('js');
$('.tabs').each(function() {
const $a = $(this).find('a'); //pobieram wszystkie linki-zakładki
//po kliknięciu na link...
$a.on('click', function(e) {
//podstawiamy pod zmienną $this kliknięty link
const $this = $(this);
//pobieramy href klikniętego linka
const href = $this.attr('href');
//pobieramy treść na którą wskazuje link
const $target = $(href);
//jeżeli ta treść w ogóle istnieje...
if ($target.length) {
e.preventDefault(); //przerwij domyślną czynność jeżeli istnieje zawartość zakładki - inaczej niech dziala jak link
//usuwamy z sąsiednich linków klasę active
$this.siblings('a').removeClass('active');
//klikniętemu linkowi dajemy klasę active
$this.addClass('active');
//podobne działanie robimy dla treści tabów
$target.siblings('.tab-content').removeClass('active');
$target.addClass('active');
}
});
});
});
Kod:
<!-- Truck #1 -->
<div class="list-of-trucks">
<div class="title">
<div class="container">Pogromcy głodu</div>
</div>
<img id="burrito" class="tab-image active" src="<?php echo $link_to_template; ?>/images/list-of-truck-image-1.png" />
<img id="fajita" class="tab-image" src="<?php echo $link_to_template; ?>/images/list-of-truck-image-1.png" />
<div class="container">
<div class="flex">
<div class="menu-box">
<img src="<?php echo $link_to_template; ?>/images/logo-circle.png" />
<div class="tabs">
<a href="#burrito" class="active">Burrito</a>
<a href="#fajita">Fajita</a>
<a href="#enchilada">Enchilada</a>
<a href="#burrito-bowl">Burrito bowl</a>
</div>
<div class="tabs-container">
<article id="burrito" class="tab-content active">
<h1>Classic burrito</h1>
<p>
Arguably GYG's most popular Mexican dish, the humble burrito delivers real Mexican flavours this side of the Pacific. Enjoy a generous combination of delectable fillings hand-wrapped in a fresh soft tortilla.
<br />
<br />
- Flour tortilla<br />
- Fluffy white or brown rice<br />
- Succulent meat or veggies of your choice.
</p>
</article>
<article id="fajita" class="tab-content">
<h1>Fajita</h1>
<p>
Arguably GYG's most popular Mexican dish, the humble burrito delivers real Mexican flavours this side of the Pacific. Enjoy a generous combination of delectable fillings hand-wrapped in a fresh soft tortilla.
<br />
<br />
- Flour tortilla<br />
- Fluffy white or brown rice<br />
- Succulent meat or veggies of your choice.
</p>
</article>
<article id="enchilada" class="tab-content">
<h1>Enchilada</h1>
<p>
Arguably GYG's most popular Mexican dish, the humble burrito delivers real Mexican flavours this side of the Pacific. Enjoy a generous combination of delectable fillings hand-wrapped in a fresh soft tortilla.
<br />
<br />
- Flour tortilla<br />
- Fluffy white or brown rice<br />
- Succulent meat or veggies of your choice.
</p>
</article>
<article id="burrito-bowl" class="tab-content">
<h1>Burrito bowl</h1>
<p>
Arguably GYG's most popular Mexican dish, the humble burrito delivers real Mexican flavours this side of the Pacific. Enjoy a generous combination of delectable fillings hand-wrapped in a fresh soft tortilla.
<br />
<br />
- Flour tortilla<br />
- Fluffy white or brown rice<br />
- Succulent meat or veggies of your choice.
</p>
</article>
</div>
</div>
<div class="text-box">
<h1>Pogromcy głodu</h1>
<p>Pogromcy Głodu w mgnieniu oka podbili podniebienia krakowian swoimi kanapkami i burgerami. Cubanos z domowymi, samodzielnie wędzonymi wędlinami i pyszne BLT z idealnie wysmażonym bekonem.</p>
<ol class="buttons">
<li><a href="<?php facebook_link_read(); ?>"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="<?php youtube_link_read(); ?>"><i class="fab fa-youtube-square"></i></a></li>
<li><a href="<?php instagram_link_read(); ?>"><i class="fab fa-instagram"></i></a></li>
<li><a href="<?php google_plus_link_read(); ?>"><i class="fab fa-google-plus-square"></i></a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- End #1 -->
-- EDIT --
Przed chwilką zauważyłem, że nie działa mi poprawnie dlatego że tab-content i tab-image mają te same id i dlatego wybiera tylko tab-image, ponieważ jest wcześniej tylko że muszą mięć te same id :/
