Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.12.2011, 16:06
Интересующийся
Отправить личное сообщение для d4a1 Посмотреть профиль Найти все сообщения от d4a1
 
Регистрация: 03.09.2010
Сообщений: 26

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

Первый должен выводиться по умолчанию, и ссылка, при нажатии - выводится второй div, а первый не выводится, и обратно.
Ответить с цитированием
  #2 (permalink)  
Старый 09.12.2011, 16:44
Интересующийся
Отправить личное сообщение для d4a1 Посмотреть профиль Найти все сообщения от d4a1
 
Регистрация: 03.09.2010
Сообщений: 26

<!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 ?
Ответить с цитированием
  #3 (permalink)  
Старый 09.12.2011, 16:47
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

google: toggle
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2011, 16:55
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

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

Последний раз редактировалось devote, 09.12.2011 в 17:01.
Ответить с цитированием
  #5 (permalink)  
Старый 09.12.2011, 16:55
Интересующийся
Отправить личное сообщение для d4a1 Посмотреть профиль Найти все сообщения от d4a1
 
Регистрация: 03.09.2010
Сообщений: 26

Вот код. Вроде совсем ужасный, но работает. Можите его в нормальное состояние привести, а то смеяться будут
<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 09.12.2011, 17:02
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

d4a1,
я поправил свой код, что бы в ФФ работал
Ответить с цитированием
  #7 (permalink)  
Старый 09.12.2011, 17:04
Интересующийся
Отправить личное сообщение для d4a1 Посмотреть профиль Найти все сообщения от d4a1
 
Регистрация: 03.09.2010
Сообщений: 26

devote,
Благодарю
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как менять параметры?? grishkovd jQuery 0 19.01.2011 13:21
jquery maxImage, как поместить бэкграунд в div? dplz jQuery 4 10.07.2010 14:09
Как менять изображение при клики Darland Общие вопросы Javascript 2 05.11.2009 12:42
Как засунуть текст в div kichSman Общие вопросы Javascript 2 16.10.2009 03:44
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 20:43