Форум

d4a1 · #1 (**permalink**) 09.12.2011, 16:06

Добрый день. Подскажите пожалуйста как сделать:
есть два блока
<div>1</div> // выводится
<div>2</div> //

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

d4a1 · #2 (**permalink**) 09.12.2011, 16:44

<!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="document.getElementById('block2').style.display = 'block', document.getElementById('block1').style.display = 'none'">Click</a>
        </body>
</html>

Так заменяет, но как сделать чтобы обратно на block1 ?

Aetae · #3 (**permalink**) 09.12.2011, 16:47

google: toggle

devote · #4 (**permalink**) 09.12.2011, 16:55

<!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>

d4a1 · #5 (**permalink**) 09.12.2011, 16:55

Вот код. Вроде совсем ужасный, но работает. Можите его в нормальное состояние привести, а то смеяться будут

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>Test</title>
                <style>
                        #block2 {
                                display: none;
                        }
                        #link2 {
                                display: none;
                        }
                </style>
        </head>
        <body>
                <div id="block1">Block 1</div>
                <div id="block2">Block 2</div>
                <a id="link1" href="#" onclick="document.getElementById('block2').style.display = 'block', document.getElementById('block1').style.display = 'none', document.getElementById('link2').style.display = 'block', this.style.display = 'none'">Click</a>
                <a id="link2" href="#" onclick="document.getElementById('block2').style.display = 'none', document.getElementById('block1').style.display = 'block', this.style.display = 'none', document.getElementById('link1').style.display = 'block'">Click2</a>
        </body>
</html>

devote · #6 (**permalink**) 09.12.2011, 17:02

d4a1,
я поправил свой код, что бы в ФФ работал

d4a1 · #7 (**permalink**) 09.12.2011, 17:04

devote,
Благодарю

Форум

Справочник

Discord чат

Курсы javascript