Как менять <divы

Тема в разделе "JavaScript", создана пользователем dmx, 16 дек 2011.

Модераторы: ZiX
  1. dmx

    dmx

    Регистр.:
    22 июн 2011
    Сообщения:
    671
    Симпатии:
    534
    Подскажите как сделать:
    есть два блока
    <div>1</div> // выводится
    <div>2</div> // не выводится

    Первый должен выводиться по умолчанию, и ссылка, при нажатии - выводится второй div, а первый не выводится, и обратно.
     
  2. gres_18

    gres_18 Pythonобандерівець®

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Код будет примерно такой:
    HTML:
    <div id="one" style="display: block;">1</div>
    <div id="two" style="display: none;">2</div>
     
    <a href="javascript: void(0);" onclick="
    if(document.getElementById('one').style.display == 'none')
      {document.getElementById('one').style.display = 'block'; document.getElementById('two').style.display = 'none';}
    else
      {document.getElementById('one').style.display = 'none'; document.getElementById('two').style.display = 'block';}">Ссылка</a>
     
  3. dmx

    dmx

    Регистр.:
    22 июн 2011
    Сообщения:
    671
    Симпатии:
    534
    БЛагодарю. А реально чтоб, Ссылка менялась на Ссылка2

    Я в JS не шарю. А разве не должны быть функции ? Он для коммерческого использования подойдёт ?
     
  4. Кошка

    Кошка Создатель

    Регистр.:
    25 апр 2008
    Сообщения:
    42
    Симпатии:
    13
    dmx, если я правильно поняла саму задачу

    HTML:
    <div id="one" style="display: block;">Блок 1</div>
    <div id="two" style="display: none;">Блок 2</div>
     
    <a href="javascript: void(0);" onclick="
    if(document.getElementById('one').style.display == 'none')
      {document.getElementById('one').style.display = 'block'; document.getElementById('two').style.display = 'none';document.getElementById('link1').style.display = 'block'; document.getElementById('link2').style.display = 'none';}
    else
      {document.getElementById('one').style.display = 'none'; document.getElementById('two').style.display = 'block';document.getElementById('link1').style.display = 'none'; document.getElementById('link2').style.display = 'block';}">
    <div id="link1" style="display: block;">Показать блок 2</div>
    <div id="link2" style="display: none;">Показать блок 1</div>
    </a>
    Функций здесь не надо, использовать можно, если участники этой темы не против :)
     
  5. dmx

    dmx

    Регистр.:
    22 июн 2011
    Сообщения:
    671
    Симпатии:
    534
    Спасибо КОШКА. Вроде всё ОК.
    Мне этот код по серьёзный проект.
    Может это код взгляните :
    PHP:
    <!DOCTYPE html>
    <
    html>
            <
    head>
                    <
    meta charset="utf-8">
                    <
    title>Test</title>
                    <
    style>
                            
    #block2 {
                                    /* visibility: hidden; */
                                    
    displaynone;
                            }
                    </
    style>
            </
    head>
            <
    body>
                    <
    div id="block1">test</div>
                    <
    div id="block2">text</div>
                    <
    a href="#" onclick="return switchBlock();">Click</a>
    <
    script type="text/javascript">
        function 
    switchBlock() {
            var 
    el1 document.getElementById('block2'),
                
    el2 document.getElementById('block1'),
                
    st el1.currentStyle el1.currentStyle.display window.getComputedStyleel1null ).getPropertyValue('display');
     
            if ( 
    st == 'none' ) {
                
    el1.style.display 'block';
                
    el2.style.display 'none';
            } else {
                
    el1.style.display 'none';
                
    el2.style.display 'block';
            }
            return 
    false;
        }
    </script>
            </body>
    </html>
    Не в коем случае не хочу вас обидеть. Но главное чтоб на быдлокод
     
  6. Кошка

    Кошка Создатель

    Регистр.:
    25 апр 2008
    Сообщения:
    42
    Симпатии:
    13
    dmx, насчет быдлокодности сказать не могу - после работы с потрохами всяких CMS, меня уже мало чем удивишь :)

    Код выглядит серьёзнее, стили в шапку вынесены, в самом выполнении отличаться не должен.

    Но сама ссылка при смене блоков не меняется, - с добавлением этой возможности есть затруднения?
     
  7. dmx

    dmx

    Регистр.:
    22 июн 2011
    Сообщения:
    671
    Симпатии:
    534
    да её бы добавить - было бы отлично
     
  8. Кошка

    Кошка Создатель

    Регистр.:
    25 апр 2008
    Сообщения:
    42
    Симпатии:
    13
    Тогда как-то так

    PHP:
    <html>
            <
    head>
                    <
    meta charset="utf-8">
                    <
    title>Test</title>
                    <
    style>
                            
    #block2 {
                                    
    displaynone;
                            }
                            
    #link2 {
                                    
    displaynone;
                            }
                    </
    style>
            </
    head>
            <
    body>
                    <
    div id="block1">test</div>
                    <
    div id="block2">text</div>
                    <
    a href="#" onclick="return switchBlock();">
                            <
    div id="link1">Click to show "text"</div>
                            <
    div id="link2">Click to show "test"</div>
                    </
    a>
                    <
    script type="text/javascript">
                        function 
    switchBlock() {
                            var 
    el1 document.getElementById('block2'),
                                
    el2 document.getElementById('block1'),
                                
    el3 document.getElementById('link2'),
                                
    el4 document.getElementById('link1'),
                                
    st el1.currentStyle el1.currentStyle.display window.getComputedStyleel1null ).getPropertyValue('display');
                 
                            if ( 
    st == 'none' ) {
                                
    el1.style.display 'block';
                                
    el2.style.display 'none';
                                
    el3.style.display 'block';
                                
    el4.style.display 'none';
                                } else {
                                
    el1.style.display 'none';
                                
    el2.style.display 'block';
                                
    el3.style.display 'none';
                                
    el4.style.display 'block';
                            }
                            return 
    false;
                        }
                    
    </script>
            </body>
    </html>
     
    And90 и dmx нравится это.
  9. dmx

    dmx

    Регистр.:
    22 июн 2011
    Сообщения:
    671
    Симпатии:
    534
    :) КОШКА от всей души благодарю. Жаль + нельзя ставить в
    XenForo
     
  10. Кошка

    Кошка Создатель

    Регистр.:
    25 апр 2008
    Сообщения:
    42
    Симпатии:
    13
    Хех :) Но вообще в профилях есть некие "Симпатии" (это может быть количество предыдущих +) и "Баллы" (подозреваю, что у всех 0).

    Да и под старыми сообщениями видно, если кто-то отметил его как понравившееся...