Нужна помощь убрать класс visible у ul, в то время когда другому ul добавляется класс visible?

<div class="tab__item active-tab" id="1">
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">FEATURED</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">New Arrivals</a></li>
                <li><a href="#">Pfg Fishing Gear</a></li>
                <li><a href="#">Rainwear</a></li>
                <li><a href="#">Titanium Collection</a></li>
                <li><a href="#">Golf Apparel</a></li>
                <li><a href="#">Exclusives</a></li>
                <li><a href="#">Collegiate Gear</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">JACKETS</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Fleece</a></li>
                <li><a href="#">Ski & Snowboard</a></li>
                <li><a href="#">Soft Shell</a></li>
                <li><a href="#">Rain</a></li>
                <li><a href="#">Windbreakers</a></li>
                <li><a href="#">Hard Shell</a></li>
                <li><a href="#">Vests</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">TOPS</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Sweatshirts & Hoodies</a></li>
                <li><a href="#">Button Down</a></li>
                <li><a href="#">T-Shirts</a></li>
                <li><a href="#">Baselayer</a></li>
                <li><a href="#">Polos</a></li>
                <li><a href="#">Hiking & Active</a></li>
                <li><a href="#">Fishing</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">BOTTOMS</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Shorts</a></li>
                <li><a href="#">Hiking & Active</a></li>
                <li><a href="#">Casual</a></li>
                <li><a href="#">Rain</a></li>
                <li><a href="#">Ski & Snowboard</a></li>
                <li><a href="#">Baselayer</a></li>
                <li><a href="#">Fishing</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">SHOES</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Boots</a></li>
                <li><a href="#">Hiking</a></li>
                <li><a href="#">Trail Running</a></li>
                <li><a href="#">Casual</a></li>
                <li><a href="#">Water & Boat</a></li>
                <li><a href="#">Sandals</a></li>
                <li><a href="#">Wide Sizes</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">ACCESSORIES</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Hats</a></li>
                <li><a href="#">Scarves & Neck Gaiters</a></li>
                <li><a href="#">Gloves & Mittens</a></li>
                <li><a href="#">Leather Wallets & Belts</a></li>
                <li><a href="#">Sunglasses</a></li>
                <li><a href="#">Socks</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">EQUIPMENT</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Backpacks & Bags</a></li>
                <li><a href="#">Coolers</a></li>
                <li><a href="#">Duffels & Rollers</a></li>
                <li><a href="#">Tents</a></li>
                <li><a href="#">Water Bottles</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">BIG & TALL</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Jackets & Vests</a></li>
                <li><a href="#">Tops</a></li>
                <li><a href="#">Bottoms</a></li>
               </ul>
              </div>
              <div class="tab__item-list">
               <div class="tab__item-title"><a href="#">SALE</a></div>
               <ul class="tab__item-categories active">
                <li><a href="#">Jackets & Vests</a></li>
                <li><a href="#">Tops</a></li>
                <li><a href="#">Bottoms</a></li>
                <li><a href="#">Big & Tall</a></li>
                <li><a href="#">Footwear</a></li>
                <li><a href="#">Accessories</a></li>
               </ul>
              </div>
              <div class="tab__item-promo" style="background-image: url(images/content/banner-promo-bg.jpg);">
               <div class="tab__item-promo-title">Get ready for Snowboarding</div>
               <div class="tab__item-promo-btn"><a href="#">Let’s shred</a></div>
              </div>
             </div>


Дело в том ,что я меняю класс с avtive на visible но чтоб только один ul мог быть под классом visible, т.е когда я жму на первый ul а следом на второй ,у первого менялся класс на active

Вот мой недоработанный js code
$(".tab__item-title a").click(function() {
 $(this).closest('.tab__item-list').find('.tab__item-categories').removeClass('active');
 $(this).closest('.tab__item-list').find('.tab__item-categories').addClass('visible')
});
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
@PlHePxJaS
Хочу понять идею php и js .
.active{display: block;}
.visible{display:none;}

<script>	
	$('.tab__item-title').on("click",function (event) {
		if($(this).next().hasClass('active')){$(this).next().removeClass('active').addClass('visible');}
		else if($(this).next().hasClass('visible')){$(this).next().removeClass('visible').addClass('active');}
});
</script>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AprelVovanya
@AprelVovanya
Кодю
Такое что-ли?
$(".tab__item-title a").click(function() {
   $('.tab__item-categories').removeClass('visible').addClass('active');
   $(this).closest('.tab__item-categories').removeClass('active').addClass('visible');
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы