Js. Задача перенести заголовок из одного блока в другой
При ширине экрана менее 768px, заголовок должен переместится вверх страницы.
Использовала parent.prepend(heading); заголовок встает на нужное место, но! на этой странице есть табы и при их переключении заголовки задваиваются. Т.е и куда перенесла он отображается и откуда переносила он тоже снова сидит.
Как сделать, чтобы при переключении вкладок оставался только один заголовок?
<div id="rcl-office" class="wprecallblock rcl-office office-webx visitor-master horizontal-menu" data-account="1">
<div id="webx-main">
<h3 class="files__heading">Добро пожаловать, Admin!</h3>
<div id="webx-header">
<div class="row">
<div class="col-md-3 pl-3">
<div id="rcl-avatar">
<span class="avatar-image">
<img alt="" src="https://secure.gravatar.com/avatar/ff43b4a56b30d63f7eb3e0fa5a7aa133?s=200&d=https%3A%2F%2Fvalentina-psy.ru%2Fwp-content%2Fuploads%2F2022%2F03%2Favatar.png&r=g" srcset="https://secure.gravatar.com/avatar/ff43b4a56b30d63f7eb3e0fa5a7aa133?s=400&d=https%3A%2F%2Fvalentina-psy.ru%2Fwp-content%2Fuploads%2F2022%2F03%2Favatar.png&r=g 2x" class="avatar avatar-200 photo" height="200" width="200" loading="lazy"> <span id="avatar-upload-progress"><span></span></span>
</span>
<span class="avatar-icons"><span class="rcl-avatar-icon icon-avatar-upload"><a title="Загрузка аватара"><i class="rcli fa-download"></i><input id="rcl-uploader-input-rcl_avatar" class="uploader-input" data-uploader_id="rcl_avatar" name="rcl-upload" type="file"><script>rcl_init_uploader({"uploader_id":"rcl_avatar","fix_editor":0,"action":"rcl_upload","temp_media":0,"input_attach":0,"auto_upload":1,"user_id":1,"post_parent":0,"input_name":"rcl-upload","dropzone":0,"max_files":10,"max_size":5120,"min_width":150,"min_height":150,"resize":[1000,1000],"file_types":["jpg","png","jpeg"],"multiple":0,"crop":1,"image_sizes":[{"height":70,"width":70,"crop":1},{"height":150,"width":150,"crop":1},{"height":300,"width":300,"crop":1}],"mode_output":"grid","manager_balloon":0,"class_name":"Rcl_Uploader","filename":1,"filetitle":"rcl-user-avatar-1","dir":"\/uploads\/rcl-uploads\/avatars"}, "2f78ab30ee3ef6ea48d0725f91c4c7fd");</script></a></span><span class="rcl-avatar-icon icon-user-info"><a title="Информация о пользователе" onclick="rcl_get_user_info(this);return false;"><i class="rcli fa-info-circle"></i></a></span></span> </div>
<div id="webx-content">
<div class="col-md-12">
<div class="webx-area-menu">
<div id="lk-menu" class="rcl-menu"><span class="rcl-tab-button" data-tab="profile" id="tab-button-profile">
<a href="https://valentina-psy.ru/account/?user=1&tab=profile" data-post="eyJ0YWJfaWQiOiJwcm9maWxlIiwibWFzdGVyX2lkIjoxfQ==" class="recall-button rcl-ajax active rcl-bttn__active">
<i class="rcli fa-user-o"></i><span>Аккаунт</span></a></span><span class="rcl-tab-button" data-tab="usful_files" id="tab-button-usful_files"><a href="https://valentina-psy.ru/account/?user=1&tab=usful_files" data-post="eyJ0YWJfaWQiOiJ1c2Z1bF9maWxlcyIsIm1hc3Rlcl9pZCI6MX0=" class="recall-button rcl-ajax"><i class="rcli fa-paperclip"></i><span>Материалы</span></a></span><span class="rcl-tab-button" data-tab="cons" id="tab-button-cons"><a href="https://valentina-psy.ru/account/?user=1&tab=cons" data-post="eyJ0YWJfaWQiOiJjb25zIiwibWFzdGVyX2lkIjoxfQ==" class="recall-button rcl-ajax"><i class="rcli fa-calendar-check-o"></i><span>Консультации</span></a></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="webx-area-tabs">
<div id="lk-content" class="rcl-content"><link rel="stylesheet" id="rcl-awesome-css" href="https://valentina-psy.ru/wp-content/plugins/wp-recall/assets/rcl-awesome/rcl-awesome.min.css?ver=16.25.19" media="all">
<div id="tab-profile" class="profile_block recall_content_block active"><div id="subtab-profile" class="rcl-subtab-content">
<h3>Профиль пользователя Admin</h3>
<form name="profile" id="your-profile" action="" method="post" enctype="multipart/form-data">
; содержимое формы
</form>
</div>
</div>
</div>
</div>
</div>
</div>
const heading = document.querySelector(".rcl-subtab-content h3");
const parent = document.getElementById("webx-header");
parent.insertAdjacentElement("beforeBegin", heading);
Ответы (1 шт):
Автор решения: De.Minov
→ Ссылка
Если задача требует переместить элемент из одного блока в другой средствами JS, то для этого используется .append().
let h3 = document.querySelector('h3'),
block1 = document.querySelector('.block-1'),
block2 = document.querySelector('.block-2');
function MoveElement(el, to) {
to.append(el);
}
let flagToggle = false;
document.querySelector('#toggle').addEventListener('click', function() {
if(flagToggle === false) {
flagToggle = true;
MoveElement(h3, block2);
} else {
flagToggle = false
MoveElement(h3, block1);
}
});h3 {margin: 0;}
.block-1,
.block-2 {
width: 200px;
height: 50px;
}
.block-1 {background: red;}
.block-2 {background: blue; color: #fff;}<div class="block-1">
<h3>Привет, Admin</h3>
</div>
<div class="block-2"></div>
<button id="toggle">Переместить</button>В вашем случае достаточно использовать CSS:
h3 {margin: 0;}
.block-1,
.block-2 {
width: 200px;
height: 50px;
}
.block-1 {background: red;}
.block-2 {background: blue; color: #fff;}
/* ---- */
.for-mobile {display: none;}
@media (max-width: 768px) {
.for-desktop {display: none;}
.for-mobile {display: block;}
}<div class="block-1">
<h3 class="for-desktop">Привет, Admin</h3>
</div>
<div class="block-2">
<h3 class="for-mobile">Привет, Admin</h3>
</div>Если открыть сниппет на весь экран, то увидите что визуально блок "переместился" с одного блока в другой.