aversa121

Активация кнопок и смена элементов

Recommended Posts

Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <link rel="stylesheet" type="text/css" href="reviews.css">
	
</head>
<body>
 

<style type="text/css">

.uc-reviws {
    position: relative;
	display: block;
}


.uc-reviews-slider{
	 overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}



.uc-reviews-slider-wrapper{
	 max-width: 100%;
    overflow: hidden;
    position: relative;
    display: block;
  }

.uc-reviews-slider-wrapper > .uc-reviews-list:after {
    clear: both;

}


 .uc-reviews-slider-wrapper .uc-reviews-list{
	-webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s;
    -webkit-transition-property: -webkit-transform,height;
    -moz-transition-property: -moz-transform,height;
    transition-property: transform,height;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}


.uc-reviews-list:before {
	content: " ";
    display: table;
}




.uc-reviews-slider-wrapper > *.active {
    z-index: 10;
}
.uc-reviews-slider-wrapper > *.active {
    opacity: 1;
}


.uc-reviews-block{
	    cursor: -webkit-grab;
	    float: left;
	    display: list-item;
	    text-align: -webkit-match-parent;
	    margin: 0px 0 0 0;
        position: relative;
}



.uc-reviews-img{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 55;
}


.uc-reviews-wrapper{
    position: absolute;
    z-index: 77;
    top: 0;
    margin: -0.7% 0 0 50%;
    padding-top: 40px;
    min-height: 100%;
    max-width: 1600px;
    box-sizing: border-box;
    display: block;
}

.uc-reviews-text {
	width: 485px;
	left: 50%;
	padding: 30px 0 0 45px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    display: block;
}

.uc-reviews-text-outer-type-a:before{
    content: '';
    position: absolute;
    left: 11px;
    background: #3c3c3c;
    width: 28px;
    height: 2px;
    margin: 9px 0 15px 0;

} 

.uc-reviews-text-outer-type-a p {    font-size: 17px;
    font-family: Lato_regular;
    line-height: 22px;
    color: #000;
    margin: 0 0 20px 0;
    position: relative;}


.uc-reviews-text-outer-type-b p {
	font-size: 16px;
    font-family: Lato_italic;
    color: #747474;
    margin: 20px 0 0 0;
}



.uc-reviews-slider:after {
    clear: both;
	content: " ";
    display: table;
}


.uc-reviews-buttom {
	display: block;
}

.uc-reviews-buttom_left {
	width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png);
    cursor: pointer;
    position: absolute;
    z-index: 9999;
    opacity: 0.8;
    margin-top: -16px;
    background-position: 0 0;
    left: 30px;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
} 


.uc-reviews-buttom_right{
	width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png);
    cursor: pointer;
    position: absolute;
    z-index: 9999;
    margin-top: -16px;
    opacity: 0.8;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
    background-position: -32px 0;
    right: 30px;
} 


.uc-reviews-number {
	position: relative;
    bottom: 67px;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}





.uc-reviews-slider .uc-reviews-number a {
	background-color: #222222;
    border-radius: 30px;
    display: inline-block;
    height: 8px;
    overflow: hidden;
    text-indent: -999em;
    width: 8px;
    position: relative;
    z-index: 99;
    -webkit-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
    cursor: pointer;
}



.uc-reviews-slider .uc-reviews-number > li:hover a, .uc-reviews-slider .uc-reviews-number > li.active a {
    background-color: #428bca;
}



.uc-reviews-slider .uc-reviews-number {
	margin: 10px 0 0;
    padding: 0;
    text-align: center;
}

.uc-reviews-slider .uc-reviews-number-position {
	cursor: pointer;
    display: inline-block;
    padding: 0 5px;
}






 </style>












<div class="uc-reviews">
			

			<div class="uc-reviews-slider "><div class="uc-reviews-slider-wrapper" style="transition-duration: 1000ms; transition-timing-function: ease;">


				<ul class="uc-reviews-list" style="width: 9443px; transform: translate3d(-2698px, 0px, 0px); height: 424px; padding-bottom: 0%;">


					<li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;">
					<img src="http://storage2.static.itmages.ru/i/18/0104/h_1515086726_8963396_bc057ad031.jpg" alt="">
					<div class="uc-reviews-wrapper">
						<div class="uc-reviews-text">
							<div class="uc-reviews-text-outer-type-a">
								<p>“Management of the centre frequently engages media to showcase the success of their residents.</p>
<p>iHUB also provides an opportunity for all their startups to participate in interesting events. For example, we have presented our startup in Oslo thanks to iHUB.”</p>
							</div>

							<p class="review-bg-text-outer-type-b">
								Nikita Dobrynin &amp; Katia Dobrynina, Founders @ AstraFit							</p>
						</div>
					</div>
				</li>
								<li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;">
					<img src="http://storage4.static.itmages.ru/i/18/0104/h_1515086781_3914429_0b10231d6a.jpg" alt="">
					<div class="uc-reviews-wrapper">
						<div class="uc-reviews-text">
							<div class="uc-reviews-text-outer-type-a">
								<p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p>
							</div>

							<p class="uc-reviews-text-outer-type-b">
								Stakh Vozniak, CEO @ TONA							</p>
						</div>
					</div>
				</li>
								
						
							
							<li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;">
					<img src="http://storage8.static.itmages.ru/i/18/0104/h_1515086875_1757560_ad7a2b467a.jpg" alt="">
					<div class="uc-reviews-wrapper">
						<div class="uc-reviews-text">
							<div class="uc-reviews-text-outer-type-a">
								<p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p>
							</div>

							<p class="uc-reviews-text-outer-type-b">
								Stakh Vozniak, CEO @ TONA							</p>
						</div>
					</div>
				</li></ul>

				<div class="uc-reviews-buttom">
					<a class="uc-reviews-buttom_left"></a>
					<a class="uc-reviews-buttom_right"></a></div></div>

					<ul class="uc-reviews-number" style="margin-top: 5px; transform: translate3d(0px, 0px, 0px);">
						
						<li class="uc-reviews-number-position"><a href="#">1</a>
						</li>
						
						<li class="uc-reviews-number-position"><a href="#">2</a>

						</li>
												

						<li class="uc-reviews-number-position"><a href="#">3</a></li></ul></div>
	</div>

</body>
</html>

 

Edited by aversa121

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ashelpakov95
      Помогите, делаю чат-бота по этому уроку и коду https://fokit.ru/kak-sozdat-chat-bota-besplatno/
       
      Есть 6 веток вопросов. Я всё удобно подписал <!--Вопрос 1-->,<!--Вопрос 2-->....
      У меня бот прогоняет все вопросы какие есть.  Как сделать, чтобы после каждой ветки вопросов бот прекращал задавать вопросы? и еще, как сделать, чтобы бот выдавал вариант ответа, при нажатии на который, перекидывало на определенную страницу сайта?
      index-22.html
    • By marizza40
      Добрый день! Жаль что у вас тут темы не удаляются, потому что когда писала, нашла у себя ошибку, а сейчас тему удалить не могу. Но сейчас не об этом. 
      Есть не анимированный слайдер
      <div class="slider"> <div class="slider_site"> <img src="/images/slider_1.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line"> </div> <div class="txt_left"> <h1 class="slider_h">АВТОМАТИЗАЦИЯ<br> КНС</h1> <div class="button"> <a href="#" class="button_a">Подробнее</a> </div><!--/.button--> </div> <div class="slider_site"> <img src="/images/slider_2.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line_two"> </div> <div class="txt_left"> <h1 class="slider_h_two">НАСОСНЫЕ СТАНЦИИ</h1> <div class="button"> <a href="#" class="button_a_one">Подробнее</a> </div><!--/.button--> </div> </div> Весь текст идет поверх картинки. На компьютере смотрится хорошо, но при уменьшении экрана браузера все начинает плыть. Как грамотно настроить, чтобы текст и кнопка при уменьшении экрана не выглядели коряво? 
      CSS:
      /*slider*/ .slider{ display: flex; font-family: 'Roboto', sans-serif; } .slider_h{ position: absolute; color: #fff; top: 32%; left: 7%; font-size: 86px; line-height: 85px; text-align: right; } .slider_h_two{ position: absolute; color: #fff; top: 32%; left: 52%; font-size: 86px; line-height: 85px; } .slider_site{ width: 100%; } .img_slider{ width: 100%; position: relative; } .slider_line{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 42%; } .slider_line_two{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 57%; } /*button*/ .button_a{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 39%; } .button_a:hover{ color: #0092db; text-decoration: none; } .button_a_one{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 52%; } .button_a_one:hover{ color: #0092db; text-decoration: none; }  
    • By Рудской
      У меня есть таблица на первой странице сайта
      Вот к примеру она....
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <select name="school" id="schoolContainer"> <option value="Код" selected>Код</option> <option value="10-0">10-0</option> <option value="10-1">10-1</option> <option value="Grandview">Grandview</option> <option value="Festus">Festus</option> <option value="R-7">R-7</option> <option value="Home-Schooled">Home-Schooled</option> </select> <input type="text" id="newSchool"/> <input type="button" id="addSchool" value="Insert"/> Мне нужно чтобы при нажатии на кнопу "Insert", информация которая была введена в поля для ввода отправлялась на другую страницу сайта.
      И каждая новая информация отправлялась, в таблицу, примерно вот такую:
      Пункт 1 | Пункт 2 | Пункт 3 | №1 Купил Завершено Типо, Когда в первой графе выбирают докустим "№1", то этот выбор писался в "Пукт 1". Так же и с остальными, если во второй графе выбирают "Купил" то этот же выбор писался в "Пункт 2... Помогите пожалуйста, никак не могу найти в интернете ответ на сей вопрос...
      Или, если кто-то сможет сделать пример всего это, я буду очень благодарен
  • Member Statistics

    46,554
    Total Members
    3,128
    Most Online
    Zzzione
    Newest Member
    Zzzione
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.