Показать сообщение отдельно
  #1 (permalink)  
Старый 21.11.2018, 09:14
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Подставлять ссылку к кнопке
Здравствуйте!
Есть список с категориями (у каждой категории своя ссылка). После выбора категории попадаем на "второй шаг" - там, в том числе, есть кнопка "Далее". Так вот нужно что бы в значение ссылки этой кнопки попадала ссылка выбранной категории.

<!DOCTYPE html>
<html lang="ru">
	
	<head>
		<meta charset="UTF-8">
		<style>
		.section-services_pb {
  padding-bottom: 250px;
}

.section-services .services-step-two {
  display: none;
}

.section-services .services-step-two_active {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.section-services .services {
  margin-bottom: 30px;
}
.section-services .services-link:hover {
  color: #fff;
}

.section-services .services-link_white {
  background: #fff;
  color: #0d75b9;
}

.section-services .services-link_white:hover {
  color: #0d75b9;
}

.section-services .select-row {
  border: none;
  padding-bottom: 0;
}
.section-services .service-tab {
  display: none;
}

.section-services .service-tab_visible {
  display: block;
}

.section-services .btn-wrap_alignment_left {
  margin-top: 50px;
}

.warning-text {
  color: #ff5956;
  margin: 30px 0 50px;
}

.services-step {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 50px;
}

.services-step img {
  -webkit-animation: rotate 2s infinite linear;
  animation: rotate 2s infinite linear;
  vertical-align: middle;
  margin-left: 67px;
}

.spinner {
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.spinner_hidden {
  opacity: 0;
}

.jq-radio {
  background: #fff;
  border: 1px solid #181818;
  width: 10px;
  height: 10px;
}

.jq-radio.focused {
  border: 1px solid #181818;
}

.jq-radio.checked .jq-radio__div {
  width: 4px;
  height: 4px;
}
		</style>
	</head>
	<body>
		
		<section class="section-services section-services_pb pt-js">
			<div class="wrapper">
				<div class="services-step">ШАГ 1 - выберите категорию услуг, которая вас интересует:</div>
				<div class="services">
					<div class="services-item services-item_overall-cargo">
						<div class="services-item__title">Перевозка габаритных грузов</div>
						<div class="services-item__hover-content">
							<a href="/link1" class="services-link btn-two btn-two_blue">Выбрать</a>
						</div>     
					</div>
					
					<div class="services-item services-item_oversized-cargo">
						<div class="services-item__title">Перевозка негабаритных грузов</div>
						<div class="services-item__hover-content">
							<a href="/link2" class="services-link services-link_white btn-two btn-two_blue">Выбрать</a>
						</div>
					</div>
					
					<div class="services-item services-item_temperature-mode">
						<div class="services-item__title">Перевозка с температурным режимом</div>
						<div class="services-item__hover-content">
							<a href="/link3" class="services-link btn-two btn-two_blue">Выбрать</a>
						</div>
					</div>
					
					<div class="services-item services-item_dangerous-goods">
						<div class="services-item__title">Перевозка опасных грузов</div>
						<div class="services-item__hover-content">
							<a href="/link4" class="services-link services-link_white btn-two btn-two_blue">Выбрать</a>
						</div>
					</div>
					
					<div class="services-item services-item_special-transport">
						<div class="services-item__title">Перевозка спецтранспортом</div>
						<div class="services-item__hover-content">
							<a href="/link5" class="services-link btn-two btn-two_blue">Выбрать</a>
						</div>
					</div>
					
					<div class="services-item services-item_partial-load">
						<div class="services-item__title">Перевозка догрузом</div>
						<div class="services-item__hover-content">
							<a href="/link6" class="services-link services-link_white btn-two btn-two_blue">Выбрать</a>
						</div>
					</div>
				</div>
				<div id="step2" class="services-step">ШАГ 2 - выберите тоннаж и тип требуемого транспорта:</div>
				<div class="select-row services-step-two">
					<div class="select-row__item">
						<div class="field-title">Тоннаж:</div>
						<select >
							<option>Выберите тоннаж</option>
							<option>5 тонн</option>
							<option>7 тонн</option>
							<option>10 тонн</option>
							<option>20 тонн</option>
						</select>
					</div>
					<div class="select-row__item">
						<div class="field-title">Тип автомобиля:</div>
						<select >
							<option>Выберите тип автомобиля</option>
							<option>Тентованный</option>
							<option>Бортовой</option>
							<option>Изотермический</option>
							<option>Рефрижиратор</option>
						</select>
					</div>
					<!-- вот сюда нужно ссылку подставлять -->
					<div class="btn-wrap_alignment_left"><a href="/mylink" class="btn-two btn-two_blue">Далее</a></div>
				</div>
			</div>
		</section>
		
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
		<script>
			if($('.services-link').length) {
				
				$('.services-link').click(function(e){
					e.preventDefault();
					$('.section-services').removeClass('section-services_pb');
					$('.services-step-two').addClass('services-step-two_active');
					$('.spinner').addClass('spinner_hidden');
					
					$('html,body').stop().animate({ scrollTop: $('#step2').offset().top - 150 }, 1000);
					e.preventDefault();
					$('.services-item').removeClass('active');
					$(this).parents('.services-item').addClass('active');
					return false;
					
				});
				
			}
		</script>	
	</body>
	
</html>
Ответить с цитированием