@korolevsky_s
iOS Developer

При нажатии на ссылку вместо одного div должен появится другой. Как реализовать?

Всем привет! Помогите пож. на конкретном примере реализовать следующую задачу: при нажатии на ссылку (.btn-search) вместо блока (.b-content_actions) должен появится другой блок (условно .b-content_actions2). И, следовательно, при закрытии нового блока на его место должен вернуться предыдущий. Вот фрагмент кода. Заранее спасибо!
<html>

<head>
  <title>Site memory</title>
  <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.index.css" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

</head>

<body>

<!-- Header -->
<div id="js-header" class="b-header">
    <div class="wrap">
		<div class="b-header_container">
		    <div class="navbar-left">
			    <div class="b-header_search">
                    <div class="b-header_btn-search">
                        <a class="btn-search" href='#'>Search</a>
                        <span class="btn-search_icon"></span>
                    </div>
				</div>
            </div>
            <div class="navbar-right">
                    <div class="b-header_btn-reg">
                        <a class="btn-reg" href='#'>Registration</a>
                    </div>
                    <div class="b-header_btn-login">
                        <a class="btn-login" href='#'>Log in</a>
                    </div>
            </div>
		</div>
    </div>
</div>
<!-- Content -->
<div id="js-content" class="b-content">
    <div class="wrap">
	    <div class="b-content_actions">
	        <div class="slogan1">
	            <h3>Text1</h3>
	        </div>


  • Вопрос задан
  • 3723 просмотра
Решения вопроса 1
reskwer
@reskwer
front-end developer
Как то так codepen.io/reskwer/pen/pvRgmp

index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="reskwer">
	<title>Что-то на CodePen</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
		<a href="#two">Cсылка</a>
		<div class="block">
			<div id="one">
			<p>Это Блок 1</p>
			</div>
			<div id="two">
				<p>Это Блок 2</p>
				<a href="#">Закрыть блок</a>
			</div>
		</div>
</body>
</html>

style.css
.block{
	width: 200px;
	height: 200px;
	position: relative;
	border: 1px solid #000;
}
#one{
	background: #eee;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
}
#two{
	background: #444;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	color: #fff;
}
#one:target > #two{
	display: none;
}
#two{
	display: none;
}
#two:target{
	display: block;
}
#two a{
	color: #ccc;
}


Что бы конкретно с вашим кодом это сделать, обращайтесь в Скайп, ВК, или Телефон. за небольшое вознаграждение сделаем
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@korolevsky_s Автор вопроса
iOS Developer
Спасибо всем за ответы! Оба ответа подходят и оба хороши. Но есть вопросы по нагрузке на сайт и, конечно же, по совместимости с IE. вариант на чистом css будет быстрее?
Ответ написан
Ваш ответ на вопрос

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

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