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

dmx

dmx

Хранитель порядка
Регистрация
22 Июн 2011
Сообщения
709
Реакции
705
Подскажите как сделать:
есть два блока
<div>1</div> // выводится
<div>2</div> // не выводится

Первый должен выводиться по умолчанию, и ссылка, при нажатии - выводится второй div, а первый не выводится, и обратно.
 
Код будет примерно такой:
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>
 
gres_18 написал(а):
Код будет примерно такой:
Нажмите для раскрытия...
БЛагодарю. А реально чтоб, Ссылка менялась на Ссылка2

Я в JS не шарю. А разве не должны быть функции ? Он для коммерческого использования подойдёт ?
 
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>

Функций здесь не надо, использовать можно, если участники этой темы не против :)
 
Спасибо КОШКА. Вроде всё ОК.
Мне этот код по серьёзный проект.
Может это код взгляните :
PHP: 
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>Test</title>
                <style>
                        #block2 {
                                /* visibility: hidden; */
                                display: none;
                        }
                </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.getComputedStyle( el1, null ).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>

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

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

Но сама ссылка при смене блоков не меняется, - с добавлением этой возможности есть затруднения?
 
да её бы добавить - было бы отлично
 
Тогда как-то так

PHP: 
<html>
        <head>
                <meta charset="utf-8">
                <title>Test</title>
                <style>
                        #block2 {
                                display: none;
                        }
                        #link2 {
                                display: none;
                        }
                </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.getComputedStyle( el1, null ).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>
 
:) КОШКА от всей души благодарю. Жаль + нельзя ставить в
XenForo
 
Хех :) Но вообще в профилях есть некие "Симпатии" (это может быть количество предыдущих +) и "Баллы" (подозреваю, что у всех 0).

Да и под старыми сообщениями видно, если кто-то отметил его как понравившееся...
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху