ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Видимость и позиционирование блоков по условию
7 сообщений из 7, страница 1 из 1
Видимость и позиционирование блоков по условию
    #39598086
Stang
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Stang
Гость
Добрый день, подскажите как реализовать видимость блоков, с какой стороны к этому подойти?
Что я хочу? К примеру, есть первый блок, состоит из 5 ссылок, или кнопок, не важно. Я выбираю любую из них. После этого данный блок теряет видимость и выпадает блок мною выбранный по ссылке, который состоит из точно таких же ссылок.
Причем, хотелось бы не просто видимость, так как таких блоков будет около сотни, но и позиционирование, чтобы один блок занимал место другого.
Если бы не большое количество блоков, то можно было реально на каждый блок создать свой файл, но это не самый лучший вариант. И тем более я потом хочу реализовать веб приложение, с подключением к БД.

Код: html
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.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Список</title>
 </head>
 <body>

   <div>
   <ul>
     <li><a href="URL">Чебурашка</a></li>
     <li><a href="URL">Крокодил Гена</a></li>
     <li><a href="URL">Шапокляк</a></li>
     <li><a href="URL">Крыса Лариса</a></li>
   </ul>
   </div>

   <div>
   <ul>
     <li><a href="URL">Чебурашка 1</a></li>
     <li><a href="URL">Чебурашка 2</a></li>
     <li><a href="URL">Чебурашка 3</a></li>
     <li><a href="URL">Чебурашка 4</a></li>
   </ul>
   </div>

   <div>
   <ul>
     <li><a href="URL">Крокодил Гена 1</a></li>
     <li><a href="URL">Крокодил Гена 2</a></li>
     <li><a href="URL">Крокодил Гена 3</a></li>
     <li><a href="URL">Крокодил Гена 4</a></li>
   </ul>
   </div>

   <div>
   <ul>
     <li><a href="URL">Шапокляк 1</a></li>
     <li><a href="URL">Шапокляк 2</a></li>
     <li><a href="URL">Шапокляк 3</a></li>
     <li><a href="URL">Шапокляк 4</a></li>
   </ul>
   </div>


 </body>
</html>
...
Рейтинг: 0 / 0
07.02.2018, 12:15
| Ответить | Цитировать | Написать  
Видимость и позиционирование блоков по условию
    #39598702
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Stang , за такие "задания" кагбэ нужно уже платить...
...
Рейтинг: 0 / 0
08.02.2018, 08:52
| Ответить | Цитировать | Написать  
Видимость и позиционирование блоков по условию
    #39598896
Stang
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Stang
Гость
krvsa, я же не прошу сделать, создать веб-проект, я прошу направить в нужном направлении...

Вижу желающих тут помочь мало, я денег не беру, может кому пригодится, пока дошел до такого варианта:
Код: html
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.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .tabs > div {
    display: none;
  }
  .tabs > ul > li.current {
     background-color: #52C8FF;
  }

  .tabs > ul > li {
      display: inline-block;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $(".tabs").each(function(indx, el) {
        var li = $(">ul>li", el),
            divs = $(">div", el);
        li.on("click", function(event) {
            event.preventDefault();
            var i = li.index(this);
            li.not($(this).toggleClass("current")).removeClass("current");
            divs.not(divs.eq(i).toggle()).hide()
        })
    })
});
  </script>
</head>

<body>

<div class="tabs">

    <ul>
        <li>Дозвонился</li>
        <li>Не дозвонился</li>
        <li>Нет связи</li>
    </ul>

    <div>
		Добрый день, извините, с кем общаюсь?
        <div class="tabs">
            <ul>
                <li>Секретарь Оля</li>
                <li>Директор Вася</li>
                <li>Сантехник</li>
            </ul>

            <div>
                А можно директора?
            </div>

            <div>
                Ты готов купить?
            </div>

            <div>
                Ребенок, передай трубку старшим
            </div>
        </div>
    </div>

    <div>
        А кому сейчас жить легко, вопрос в том, что делать?
		<div class="tabs">
            <ul>
                <li>Позвонить еще</li>
                <li>Застрелиться</li>
                <li>Иди учись</li>
            </ul>

            <div>
                Вот плохо пробуешь, или не туда
            </div>

            <div>
                Цветы родственникам отправили
            </div>

            <div>
                Продажи наше все
            </div>
        </div>
    </div>

    <div>
        Срочно проверь свой телефон
		<div class="tabs">

            <ul>
                <li>Да, телефон тю-тю</li>
                <li>Это помехи за пределами СССР</li>
                <li>Отвали дурак</li>
            </ul>

            <div>
                Дуй в магазин
            </div>

            <div>
                Лечись
            </div>

            <div>
                Сам такой
            </div>
        </div>
    </div>

</div>

</body>
</html>

   </ul>
   </div>

 </body>
</html>


Что еще нужно? Нужно что бы при выборе ветки ставили невидимыми другие варианты, для избежания проблем, ибо дерево будет довольно таки большое.
Графическое оформление это мелочи, тут не нужно.
...
Рейтинг: 0 / 0
08.02.2018, 12:54
| Ответить | Цитировать | Написать  
Видимость и позиционирование блоков по условию
    #39598944
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Stangя денег не беру
Пока кагбэ и не за что брать...
...
Рейтинг: 0 / 0
08.02.2018, 13:31
| Ответить | Цитировать | Написать  
Видимость и позиционирование блоков по условию
    #39599031
Stang
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Stang
Гость
krvsaПока кагбэ и не за что брать...

:) та ладно, вы запустите, 25% работы сделано. Осталось прикрутить макет, поля для ввода и запускай в продажу.
...
Рейтинг: 0 / 0
08.02.2018, 14:41
| Ответить | Цитировать | Написать  
Видимость и позиционирование блоков по условию
    #39599074
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Stang25% работы сделано
Самое интересное начинается на последних процентах.
...
Рейтинг: 0 / 0
08.02.2018, 15:08
| Ответить | Цитировать | Написать  
Видимость и позиционирование блоков по условию
    #39599323
Stang
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Stang
Гость
Вы переоцениваете назначение. на данном этапе осталось только прикрутить морду и внести, собственно, вместо этого бреда, нужную информацию. Если нужно нечто больше, то уже надо веб-приложение делать. Но я ведь тут не задаю вопросов по этому, да и многим и этого хватит, главное идея.
...
Рейтинг: 0 / 0
08.02.2018, 18:30
| Ответить | Цитировать | Написать  
7 сообщений из 7, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Видимость и позиционирование блоков по условию
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1444299]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 157ms
get topic data:
 12ms
get first new msg:
 7ms
get forum data:
 2ms
get page messages:
 43ms
get tp. blocked users:
 1ms
others: 241ms
total:  495ms
созд. / загр.: 495ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]