@olchagmk

Как сделать выпадающие табы со сменой контента?

Доброй ночи! Не могу справится с заданием, У меня есть карта гугла, есть 7 вкладок, в соответствии с выбранной вкладкой показывает определенные метки на карте (Идут именно разные гугл карты с разными меткаи) Вкладки сделаны с помощью Бутстрап.603c0e7667488796010390.png
в целом все ОК. НО! На адаптиве вкладки должны стать выпадающим списком типа селекта вот такими:
603c0ea5ad77c517874686.png
Как это реализовать? Код оставлю ниже. Не понимаю что нужно и куда передавать что-бы все работало.
<div class="tab-wrapper">
						<p class="mobile-title">
							213213
						</p>
						<ul class="nav nav-tabs flex-column" id="myTab" role="tablist">
			                <li class="nav-item">
			                    <a class="nav-link active" id="1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="1" aria-selected="true">
			                    <img src="img/map-icon1.svg" alt="">магазины и тц</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="2" aria-selected="false"> <img src="img/map-icon2.svg" alt=""> аптеки и клиники</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="3" aria-selected="false"> <img src="img/map-icon3.svg" alt=""> кафе и рестораны</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="4-tab" data-toggle="tab" href="#tab4" role="tab" aria-controls="4" aria-selected="false"> <img src="img/map-icon4.svg" alt=""> банки и банкоматы</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="5-tab" data-toggle="tab" href="#tab5" role="tab" aria-controls="5" aria-selected="false"> <img src="img/map-icon5.svg" alt=""> остановки</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="6-tab" data-toggle="tab" href="#tab6" role="tab" aria-controls="6" aria-selected="false"> <img src="img/map-icon6.svg" alt=""> детский досуг</a>
			                </li>
			                <li class="nav-item">
			                    <a class="nav-link" id="7-tab" data-toggle="tab" href="#tab7" role="tab" aria-controls="7" aria-selected="false"><img src="img/map-icon7.svg" alt=""> учебные заведения</a>
			                </li>
			            </ul>
					</div>
		            <div class="tab-content" id="nav-tabContent">
		                <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="1-tab">
		                    <div id="map1" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="2-tab">
		                    <div id="map2" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="3-tab">
		                   <div id="map3" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="4-tab">
		                    <div id="map4" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab5" role="tabpanel" aria-labelledby="5-tab">
		                    <div id="map5" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab6" role="tabpanel" aria-labelledby="6">
		                    <div id="map6" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		                <div class="tab-pane fade" id="tab7" role="tabpanel" aria-labelledby="7">
		                    <div id="map7" style="width: 100%; max-width: 729px; height: 461px;"></div>
		                </div>
		            </div>
  • Вопрос задан
  • 137 просмотров
Решения вопроса 1
@olchagmk Автор вопроса
Вот решение:
if( $(window).width() <= 768 ) {
            $('.title_mob').click( function() {
            $(this).closest('.map_block_mobile').find('ul').slideToggle('fast');
        });
        $('.map_block .nav-tabs a').click( function() {
            var activeTab = $(this).html();
            $(this).closest('.map_block_mobile').find('p').html(activeTab);
            $(this).closest('.map_block_mobile').find('ul').slideUp('fast');
        });
    }
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Я так понимаю вам надо nav в navbar обернуть и не забыть про navbar-toggler.
Ответ написан
@Cray7
Учусь на frontend-разработчика
Это типичное меню-бургер, в инете много примеров, мне помогло понять это - https://www.youtube.com/watch?v=chJQofBSx94
Единственное, что он не объясняет - для чего делает слой :before у хедера. У него в примере это связано с использованием z-index в анимации. Если с анимацией (выезд меню сверху) заморачиваться не будешь, то можно обойтись без z-index и :before.
Ответ написан
Ваш ответ на вопрос

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

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