Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Видимость и позиционирование блоков по условию  [new]
Stang
Member

Откуда:
Сообщений: 111
Добрый день, подскажите как реализовать видимость блоков, с какой стороны к этому подойти?
Что я хочу? К примеру, есть первый блок, состоит из 5 ссылок, или кнопок, не важно. Я выбираю любую из них. После этого данный блок теряет видимость и выпадает блок мною выбранный по ссылке, который состоит из точно таких же ссылок.
Причем, хотелось бы не просто видимость, так как таких блоков будет около сотни, но и позиционирование, чтобы один блок занимал место другого.
Если бы не большое количество блоков, то можно было реально на каждый блок создать свой файл, но это не самый лучший вариант. И тем более я потом хочу реализовать веб приложение, с подключением к БД.

<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>
7 фев 18, 12:15    [21172681]     Ответить | Цитировать Сообщить модератору
 Re: Видимость и позиционирование блоков по условию  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13116
Stang, за такие "задания" кагбэ нужно уже платить...
8 фев 18, 08:52    [21175095]     Ответить | Цитировать Сообщить модератору
 Re: Видимость и позиционирование блоков по условию  [new]
Stang
Member

Откуда:
Сообщений: 111
krvsa, я же не прошу сделать, создать веб-проект, я прошу направить в нужном направлении...

Вижу желающих тут помочь мало, я денег не беру, может кому пригодится, пока дошел до такого варианта:
<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>

Что еще нужно? Нужно что бы при выборе ветки ставили невидимыми другие варианты, для избежания проблем, ибо дерево будет довольно таки большое.
Графическое оформление это мелочи, тут не нужно.
8 фев 18, 12:54    [21175990]     Ответить | Цитировать Сообщить модератору
 Re: Видимость и позиционирование блоков по условию  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13116
Stang
я денег не беру

Пока кагбэ и не за что брать...
8 фев 18, 13:31    [21176171]     Ответить | Цитировать Сообщить модератору
 Re: Видимость и позиционирование блоков по условию  [new]
Stang
Member

Откуда:
Сообщений: 111
krvsa
Пока кагбэ и не за что брать...


:) та ладно, вы запустите, 25% работы сделано. Осталось прикрутить макет, поля для ввода и запускай в продажу.
8 фев 18, 14:41    [21176467]     Ответить | Цитировать Сообщить модератору
 Re: Видимость и позиционирование блоков по условию  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13116
Stang
25% работы сделано

Самое интересное начинается на последних процентах.
8 фев 18, 15:08    [21176634]     Ответить | Цитировать Сообщить модератору
 Re: Видимость и позиционирование блоков по условию  [new]
Stang
Member

Откуда:
Сообщений: 111
Вы переоцениваете назначение. на данном этапе осталось только прикрутить морду и внести, собственно, вместо этого бреда, нужную информацию. Если нужно нечто больше, то уже надо веб-приложение делать. Но я ведь тут не задаю вопросов по этому, да и многим и этого хватит, главное идея.
8 фев 18, 18:30    [21177730]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить