Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2021, 21:46
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Как ограничить страницы и контент в них. Чтобы на других страницах не было видно
Добрый день всем. Возникла проблема которую не очень понимаю как решить. Есть 4 страницы сперва было на html, потом я перевел на JS динамически. Ивозникла проблема что контент из 1 странцы (home) виден и на других страницах, так как я указал в querySelector('main'). Я знаю видно везьде ведь этот main глобальный и я указал что он создает после body, но вот как мне тогда ограничить другие страницы я не знаю.

Вот где создает main для всех страниц
function main(root) {
    const globalMain = document.createElement('main');
    globalMain.classList.add('global-main'); 
    root.append(globalMain);
}

main(document.querySelector('body'));


Вот для примера 2 страницы с блоками опять же которые видны на всех страницах а должны только на одной своей странице

function contact(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-con');
    box2.classList.add('box-con__con');
    box.append(box2);
    root.append(box);
}

contact(document.querySelector('main'));


function services(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-ser');
    box2.classList.add('box-ser__ser');
    box.append(box2);
    root.append(box);
}

services(document.querySelector('main'));


P.S. Полность не могу кинуть слишком много места занимает. Но там все есть чтобы понять проблему.Заранее спасибо кто поможет
Вложения:
Тип файла: zip formstyle-demo-HowToMake.zip (3.7 Кб, 0 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 19.05.2021, 21:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Alexander3928
но вот как мне тогда ограничить другие страницы я не знаю.
Так ты генери те страницы только когда нужны именно они...
Зачем делать их все сразу?
Ответить с цитированием
  #3 (permalink)  
Старый 19.05.2021, 22:45
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Вы меня не правильно поняли. У меня сайт из 4 разных страниц(home,server,contact, portfolio). В
header
я их добавил, ну типо как переходы между страниц. И вот проблема что каждая страница видит контент который на других страница. Ну если проще на странице home только изображения без единого текста, а на странице services только текст и все. Так вот, не важно какая из них смотрится я вижу как картинки, так и текст, хотя не должен. Может так я лучше описал ситуацию. И выше написал что не понимаю к чему привязываться ведь главный елемент main я добавил в body и он везде на любой странице, го мне нужно что в нем контент менялся зависимо от страниц

Последний раз редактировалось Alexander3928, 19.05.2021 в 22:48.
Ответить с цитированием
  #4 (permalink)  
Старый 20.05.2021, 08:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Alexander3928
мне нужно что в нем контент менялся зависимо от страниц
Удаляй его содержимое, потом вставляй в него нужное

Сообщение от Alexander3928
Вы меня не правильно поняли. У меня сайт из 4 разных страниц
...
Так вот, не важно какая из них смотрится я вижу как картинки, так и текст, хотя не должен.
Все я правильно понял...
Эти страницы разные пока в твоей голове, а по факту они все в куче.
Ответить с цитированием
  #5 (permalink)  
Старый 20.05.2021, 09:52
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Так это ж лишнее кодописание. Типо добовлять что при нажатии на кнопку (contact) будет удалятся все элементы не связаные с этой страницой. Мне кажется это убьет все и сайт будет грузится очень долго
Ответить с цитированием
  #6 (permalink)  
Старый 20.05.2021, 12:30
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Чему там грузиться то?
Во-первых какой смысл динамически генерировать статическое содержимое?
Ну если так уж хочется, то можно генерить 4 секции, соответствующие страницам. Сразу, или по мере перехода на эту секцию, и по необходимости переключать их, либо через display: none/block, либо отсоединять (не удаляя) и подключать к DOM.
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2021, 14:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Alexander3928
Типо добовлять что при нажатии на кнопку (contact) будет удалятся все элементы не связаные с этой страницой. Мне кажется это убьет все и сайт будет грузится очень долго
Так, например, работает React.
Ответить с цитированием
  #8 (permalink)  
Старый 20.05.2021, 20:44
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Если я правильно понял, нужно событие клика добавить на ссылку которая на другую страницу перекидывает. И типо добавить
element.style.display = "none"
, а для нужной страницы(елементу страницы) добавить
element2.style.display = "block"
, но она мне кажется так не работает. Я писал в 4 разных js файлах и вроде как я не смогу обратится к элементам из других стран будет писать "is not defined"(это если я буду пытаться из 4 js файла попытаться его элементы объявить в других там 1,2,3 js файл )
Ответить с цитированием
  #9 (permalink)  
Старый 20.05.2021, 20:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Alexander3928
мне кажется так не работает
Сделай уже тестовый пример...
На пальцах у тебя не особо получается.

Или переходи уже на Vue.JS или React.JS...
Ответить с цитированием
  #10 (permalink)  
Старый 20.05.2021, 22:42
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Надеюсь так будет понятней
В src есть папки
services-page - страница services со стилями и как для теста разноцветные блоки
portfolio-page - страница portfolio со стилями и как для теста разноцветные блоки
main-page - страница home со стилями и как для теста разноцветные блоки
contact-page - страница contact со стилями и как для теста разноцветные блоки
header-js - шапка
main-js - там где создается тег
main
после
body

index.js - импорт стилей и элементов

Ну так вот все это разноцветные блоки из services-page, portfolio-page, main-page, contact-page. Они ведны на всех страницах, а моя цель чтобы под каждой странице был свой разноцветный блок и не поаторялся на других страницах.Чтобы у каждой странице был только по 1 разноцветному блоку, а не по 4 как у меня

P.S. node_modulse не вышло добавить слишком большой.
Изображения:
Тип файла: jpg Снимок экрана от 2021-05-20 22-43-17.jpg (9.0 Кб, 3 просмотров)
Вложения:
Тип файла: zip final-project.zip (155.8 Кб, 1 просмотров)
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML5 Как сделать, чтобы можно было двигать картинку мышью? Бобр Общие вопросы Javascript 2 18.06.2010 21:22
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 20:18
Как ограничить работу скрипта, чтобы он выполнялся локально? Netot Я не знаю javascript 5 04.06.2009 20:03
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30