Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Видимость и позиционирование блоков по условию / 7 сообщений из 7, страница 1 из 1
07.02.2018, 12:15
    #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
| Ответить | Цитировать | Написать  
08.02.2018, 08:52
    #39598702
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Видимость и позиционирование блоков по условию
Stang , за такие "задания" кагбэ нужно уже платить...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.02.2018, 12:54
    #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, 13:31
    #39598944
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Видимость и позиционирование блоков по условию
Stangя денег не беру
Пока кагбэ и не за что брать...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.02.2018, 14:41
    #39599031
Stang
Stang
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Видимость и позиционирование блоков по условию
krvsaПока кагбэ и не за что брать...

:) та ладно, вы запустите, 25% работы сделано. Осталось прикрутить макет, поля для ввода и запускай в продажу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.02.2018, 15:08
    #39599074
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Видимость и позиционирование блоков по условию
Stang25% работы сделано
Самое интересное начинается на последних процентах.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.02.2018, 18:30
    #39599323
Stang
Stang
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Видимость и позиционирование блоков по условию
Вы переоцениваете назначение. на данном этапе осталось только прикрутить морду и внести, собственно, вместо этого бреда, нужную информацию. Если нужно нечто больше, то уже надо веб-приложение делать. Но я ведь тут не задаю вопросов по этому, да и многим и этого хватит, главное идея.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Видимость и позиционирование блоков по условию / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 534ms
Закрыть
start [/forum/moderation_log.php?user_name=nata38]:
 0ms
get settings:
 9ms
get forum list:
 13ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 176ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 237ms
total:  534ms
x
x
Закрыть


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