Скрипт скрывающий невидимый див по клику и создающий к ним доступ через ссылку
Доброго вечера уважаемые форумчане. У меня назрел очень важный но пока невыполнимый для меня (новичка) вопрос. Я делаю страничку там будет 4 дива (каждый содержит анимацию) Но 3 из этих дивов скрытые. Дивы эти пользователь должен открыть когда нажмет на один из пунктов меню на сайте. Механика такова пользователь нажал на один из 4 дивов соотвественно один из 4 должен отрытся а остальные должны бить скрыты. Но все дивы на одной страницы, а нужно сделать так чтоб при нажатии на оприделенный див скрипт по мимо открытия этого дива должен добавить в браузерную строку, ссылку на него (как при переходе на другую страничку) и скопировав ссылку на эту страничку (на конкретный див) и можна было б пулучить к ней доступ. Надеюсь понятно обяснил , если что спрашивайте буду очень благодарен за помощь.
|
Цитата:
:D Вообще нихрена не понятно. По первому - устанавливать всем дивам display:none, после чего нужному устанавливать display:block. По ссылке я так и ен понял то ли нао перейти по новому адресу то ли только показать его в строке адреса...если второе то использовать history (или плагин типо PushStateHistory), если первое то location.pathname. Дальше я просто не понял смысла. |
Наверное имелись ввиду табы, похожее под описание можно глянуть например здесь
|
https://www.youtube.com/watch?v=sAjAUmtGylY
Вот делаю урок все по этому видео, но что-то не так так как код всё равно не работает. Нужно также как и на видео сделать чтоб когда пользователь клацал по ссылке то подменялся урл только без # надо сделать. То есть это должна быть якобы имитация перехода по ссылке, но перехода не былоб просто показывался контент , с одного из 4 дивов а остальные скрытые, чтоб пользователь который открыл один из 4 дивов мог на него ссылку например кому нибуть отправить на конкретный див. и все это должно происходить на одной странице без подгрузок аяксов и тд. Надеюсь не запутал) Может есть идеи как это реализовать иначе не так как на видео. Вот код если несложно проверте на наличие ошибок: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> </head> <body> <div class= "container"> <h1> Welcome to my sample page</h1> <ul class = "nav" > <hr /> <li> <a href="main"> Maine</a></li> <li> <a href="about">Aboute</a></li> <li> <a href="downloads">Downloads</a></li> <hr /> </ul> <div class="content"></div> </div> <script> var links, updatestate, updatebuttons, contentEL, navEL; contentEL = document.querySelector('.content'); navEL = document.getElementById('nav'); Links = { main: "This is page 1", about: "This is page 2", downloads: "this is page 2" }; updatestate = function(state){ if (!state) return; contentEL.innerHTML = links[state.page]; updatebuttons(state); }; updatebuttons = function(state){ [].slice.call(navEL.querySelectoraALL('a')) .forEach(function(e){ var classList = e.parentNode.classList; state.page === e.getAttribute('href') ? classList.add('active') : classList.remove('active'); }); }; window.addEventListener('postate', function(e){ updatestate(e.state); }); if(navEL){ navEL.addEventListener('click', function(e){ e.preventDefault(); var state; if (e.target.tagName !=='A') return; state = {page: e.target.getAttribute('href')}; history.pushState(state, '', state.page); updatestate(state); }); } </script> </body> </html> |
| Часовой пояс GMT +3, время: 05:20. |