С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.89/9: Рейтинг темы: голосов - 9, средняя оценка - 4.89
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 10
1

Открытие определенного пункта меню на JS по условию

01.06.2016, 05:28. Показов 1752. Ответов 9
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Всем доброго времени суток!

Взял код менюшки на JS с одного сайта

Javascript
1
2
3
4
5
6
7
8
9
10
11
<script>
var show;
function hidetxt(type){
 param=document.getElementById(type);
 if(param.style.display == "none") {
 if(show) show.style.display = "none";
 param.style.display = "block";
 show = param;
 }else param.style.display = "none"
}
</script>

Сама менюшка

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div>
<a class="button10" onclick="hidetxt('div1'); return false;" href="#" rel="nofollow">Ремонт компьютеров</a>
<div class="text" style="display:none;" id="div1">
    Многа букав 1
</div>
</div>
<div>
<a class="button10" onclick="hidetxt('div2'); return false;" href="#" rel="nofollow">Ремонт ноутбуков</a>
<div class="text" style="display:none;" id="div2">
    Многа букав 2
</div>
</div>
<div>
<a class="button10" onclick="hidetxt('div3'); return false;" href="#" rel="nofollow">Заправка картриджей</a>
<div class="text" style="display:none;" id="div3">
    Многа букав 3
</div>
</div>

Оговорюсь, в JS я не бум-бум.
Ситуация - надо при переходе с каким-нибудь условием открывать определённый пункт.

Если б был просто html - сделал бы через <a name="top"></a> и далее site.ru/#top(в моём случае - div1 etc),
но с JS этот фокус не проходит.
Подскажите как реализовать переход с открытием?
Т.е. хочу, к примеру в моём случае, так - site.ru/div1 и раскрывалось первый пункт меню.
Спасибо!
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
01.06.2016, 05:28
Ответы с готовыми решениями:

Открытие отфильрованного пункта меню в jQuery
Есть рабочая галерея в квери с сортирующимися блоками. &lt;ul id=&quot;categor&quot; class=&quot;portfolio-categ...

Открытие пункта меню настроек по ссылке
Доброго времени суток, вот пытаюсь по ссылке открыть пункт меню, в сафари ссылку открывает, а вот...

Открытие пункта меню наведением мыши
как сделать, чтобы пункт меню, имеющий подпункты, открывался не щелчком, а наведением мыши? У меня...

Как в общем меню для всех страниц поменять класс определенного пункта в зависимости от страницы на которой мы находимся
Собственно вопрос,как в общем меню для всех страниц поменять класс определенного пункта в...

9
Ренегат
Эксперт HTML/CSS
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
01.06.2016, 07:39 2
Цитата Сообщение от lamobot_555 Посмотреть сообщение
site.ru/div1
ну
может всё-таки так же через хеши реализовать?
а то будет несколько накладно на несколько url посылать один и тот же документ
ну да не важно

вот что я могу предложить
всем пунктам сделайте определённый класс, допустим point
он дефолтный, то есть скрытый
тем, которые надо показать надо будет просто добавить класс shown
соответственно код будет примерно такой
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// берём все показанные элементы, которых должно быть ОДИН)
var shown=document.getElementsByClassName("shown")[0];
// снимаем с него класс shown и он по css сам должен скрыться
shown.classList.remove("shown");
 
// теперь интересное
// я буду брать по хешу, так что постарайтесь в этот кусок кода вникнуть
var HashTab = {
    // название якоря : id элемента, который надо показать
    "#page1": "firstPage",
    "#page2": "secondPage"
};
// находим элемент и показываем его
shown = document.getElementById(HashTab[location.hash]);
if (!!shown)
    shown.classList.add("shown");
0
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 10
01.06.2016, 08:41  [ТС] 3
Спасибо, конечно, добрый человек за ответ!
Только, как писал в первом посте - я в JS не шарю, вообще...
Можно поподробнее расписать что и куда ставить?

ПС В моем листинге уже указаны классы, т.е.
<a class="button10"
<div class="text"
эти классы используются для CSS.

Если не затруднит, что где поменять/добавить/убрать прям пошагово можно?
0
Ренегат
Эксперт HTML/CSS
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
01.06.2016, 11:47 4
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div>
<a class="button10" onclick="hidetxt('div1'); return false;" href="#page1" rel="nofollow">Ремонт компьютеров</a>
<div class="text" id="div1">
    Многа букав 1
</div>
</div>
<div>
<a class="button10" onclick="hidetxt('div2'); return false;" href="#page2" rel="nofollow">Ремонт ноутбуков</a>
<div class="text" id="div2">
    Многа букав 2
</div>
</div>
<div>
<a class="button10" onclick="hidetxt('div3'); return false;" href="#page3" rel="nofollow">Заправка картриджей</a>
<div class="text" id="div3">
    Многа букав 3
</div>
</div>
<script>
// берём все показанные элементы, которых должно быть ОДИН)
var shown=document.getElementsByClassName("shown")[0];
// снимаем с него класс shown и он по css сам должен скрыться
shown.classList.remove("shown");
 
// теперь интересное
// я буду брать по хешу, так что постарайтесь в этот кусок кода вникнуть
var HashTab = {
    // название якоря : id элемента, который надо показать
    "#page1": "firstPage",
    "#page2": "secondPage"
};
// находим элемент и показываем его
shown = document.getElementById(HashTab[location.hash]);
if (!!shown)
    shown.classList.add("shown");
</script>
CSS
1
2
3
4
5
6
.text {
    display: none;
}
.shown {
    display: block !important;
}
0
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 10
01.06.2016, 12:13  [ТС] 5
Не работает. Возможно, потому что я не до конца описал работу скрипта менюшки.
Скрипт из первого поста, на данном примере формирует меню-список, при клике на пункте менюшки происходит не переход, а раскрытие "Многа букав", кликая по другому пункту - предыдущий сворачивается и разворачивается нажатый.
И т.д. Так вот мне надо чтоб зайдя по определенной ссылке разворачивался сразу нужный пункт меню.
Надеюсь принцип теперь понятно объяснил.))
0
Ренегат
Эксперт HTML/CSS
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
01.06.2016, 12:44 6
lamobot_555, всё с вами понятно...)
держите рабочий пример
1
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 10
01.06.2016, 12:55  [ТС] 7
СПАСИБО!!! Я нашел свою ошибку.
А можно еще чтоб нажатая кнопка "улетала" в самый верх страницы и равнялась с верхним краем, чтоб не пролистывать текст?
0
Ренегат
Эксперт HTML/CSS
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
01.06.2016, 13:21 8
lamobot_555, могу дать статейку по этому поводу
надеюсь вы сами сможете сделать всё правильно
если нет, то дам совет: последний if надо увеличить на одно действие с shown
0
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 10
01.06.2016, 14:41  [ТС] 9
BANO, уважаемый, да ВЫ просто НАХОДКА для шпиона!)))

"Почти" работает!)) В примере, в учебнике отрабатывает правильно функция, а на сайте кнопка "улетает" за пределы экрана ровно по нижней границы кнопки.
В примере на jsfiddle.net у Вас просто текстовые ссылки, а у меня на сайте - красивые кнопочки на CSS, может в этом проблема?
0
Ренегат
Эксперт HTML/CSS
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
01.06.2016, 15:13 10
тогда стандартную прокрутку придётся менять на свою, хотя по сути то же самое
Javascript
1
window.scrollTo(0, shwon.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop))
по идее эта длинная фиговина должна сработать, но может и не сработать, тогда придётся прибавлять определённую константу
0
01.06.2016, 15:13
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
01.06.2016, 15:13
Помогаю со студенческими работами здесь

Выделение пункта меню при наведении - только текст или весь блок пункта
Всем привет.Есть меню, при наведении появляется hover но он идет строго по тексту... Можно ли его...

Установка галочки в пункте меню при выборе данного пункта меню
Есть меню,надо,чтобы при нажатии на пункт меню напротив этого пункта ставилась галочка. Знаю про...

Запретить выбор пункта меню, если он уже выбран в другом меню
Доброго времени суток! Помогите пожалуйста с такой задачкой: На форме 4 TPanel, к ним прикручены...

Выбор определенного пункта в Combobox при запуске программы.
Как сделать чтоб в Combobox при включении ? Сразу выбирался один из пунктов. С#


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Книги и учебные ресурсы по C#
InfoMaster 08.01.2025
Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .
Что такое NullReferenceEx­­­ception и как исправить?
InfoMaster 08.01.2025
NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .
Что такое Null Pointer Exception (NPE) и как это исправить?
InfoMaster 08.01.2025
Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .
Русский язык в консоли C++
InfoMaster 08.01.2025
При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .
Telegram бот на C#
InfoMaster 08.01.2025
Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .
Использование GraphQL в Go (Golang)
InfoMaster 08.01.2025
Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор?
Alexander-7 08.01.2025
Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .
Как работать с GraphQL на TypeScript
InfoMaster 08.01.2025
Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .
Счётчик на базе сумматоров + регистров и генератора сигналов согласования.
Hrethgir 07.01.2025
Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .
Как перейти с Options API на Composition API в Vue.js
BasicMan 06.01.2025
Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .
Архитектура современных процессоров
inter-admin 06.01.2025
Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .
История создания реляционной модели баз данных, правила Кодда
Programming 06.01.2025
Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru