Как переключаться между двумя divs

Я пытаюсь переключиться между двумя div. Например, onload, я хочу, чтобы левое содержимое отображалось, а правильный контент оставался скрытым. Если я нажму на правый div, я хочу, чтобы левое содержимое спряталось, и появилось нужное содержимое, и наоборот. Я очень новичок в javascript, но вот что у меня есть. Кажется, я не могу заставить его работать. Пожалуйста, помогите ...Как переключаться между двумя divs

Вот мой HTML код:

<div onclick="toggle_visibility('left');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');"> 
    Right 
</div> 


<div id="left" style="display: block;"> 
    This is the content for the left side 
<div> 

<div id="right" style="display: none;"> 
    This is the content for the ride side 
</div>

Вот это Javascript Я использую:

<script type="text/javascript"> 
    function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
     else 
     e.style.display = 'block'; 
    } 
    </script>

источник

2011-02-08 Ryan Bennett

Живой демонстрация:http://jsfiddle.net/PauWy/1/

HTML:

<p id="toggle"> 
    <span> Left </span> 
    <span> Right </span> 
</p> 

<div id="left"> LEFT CONTENT </div> 
<div id="right"> RIGHT CONTENT </div>

J avaScript:

$('#toggle > span').click(function() { 
    var ix = $(this).index(); 

    $('#left').toggle(ix === 0); 
    $('#right').toggle(ix === 1); 
});

CSS (чтобы скрыть правильный DIV OnLoad):

#right { display:none; }

Поместите код JavaScript в нижней части страницы.

Обратите внимание, как элемент SCRIPT находится в конце элемента BODY. Также обратите внимание, что код jQuery должен находиться внутри готового обработчика: $(function() { ... code ... });

источник

2011-02-08 18:25:49

По какой-то причине, я скопировал точный код и он не работает локально, но работает на jsfiddle.net. Влияет ли на него библиотека JQuery? –

@ Ryan Вы также скопировали вышеуказанный HTML-код? Где вы разместили код JavaScript (в HEAD или внизу BODY)? –

Я скопировал HTML, и я поместил код JavaScript в Head и HTML в тело. –

Вы только переключая видимость 1 из 2-х элементов каждого время. Когда вы нажмете налево, он исчезнет, но вы не указали правильную сторону. Попробуйте:

<div onclick="toggle_visibility('left');toggle_visibility('right');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');toggle_visibility('left');"> 
    Right 
</div>

источник

2011-02-08 18:21:07 William

Так как и меченый вопрос jquery плохо Предположим, ваш открытым для решения Jquery. Это сделает это очень простым. Проверьте jsfiddle ниже примера ...

http://jsfiddle.net/VztjL/

, конечно, вы будете нуждаться в некоторых CSS для укладки, но нажав на DIV в образце будет переключаться между двумя дивами

источник

2011-02-08 18:22:48 stephen776

Для начала закрывающий тег отсутствует. Песочные вещи, те.

Во-вторых, вам нужно отслеживать текущий видимый div, чтобы вы могли скрыть его. Следующее должно работать.

<html> 
<head> 
<script type="text/javascript"> 
    top.visible_div_id = 'right'; 
    function toggle_visibility(id) { 
    var old_e = document.getElementById(top.visible_div_id); 
    var new_e = document.getElementById(id); 
    if(old_e) { 
     console.log('old', old_e, 'none'); 
     old_e.style.display = 'none'; 
    } 
    console.log('new', new_e, 'block'); 
    new_e.style.display = 'block'; 
    top.visible_div_id = id;   
    } 
    </script> 
</head> 
<body onload="toggle_visibility('left');"> 

<div onclick="toggle_visibility('left');"> 
    Left 
</div> 

<div onclick="toggle_visibility('right');" > 
    Right 
</div> 


<div id="left" > 
    This is the content for the left side 
</div> 

<div id="right" > 
    This is the content for the ride side 
</div> 

</body> 
</html>

источник

2011-02-08 18:30:57 bbrame

Вот небольшой пример, который переключает между двумя html-документами. Функция сначала вызывается, когда тело загружается. U нужно заменить 1.html и 2.html двумя страницами, которые вы хотите перевернуть между ними. Если вы хотите более длительную задержку, замените 3000 на то, что захотите. значение таймера в миллисекундах, так что если вы хотите 20 секунд его 20000.

 <html> 
     <head> 
     <script type="text/javascript"> 
      top.visible_id = 'right'; 

      function toggle_visibility() { 

      var right_e = document.getElementById('right'); 
      var left_e = document.getElementById('left'); 
      if (top.visible_id == 'right') { 
       right_e.style.display = 'none'; 
       left_e.style.display = 'block'; 
       top.visible_id = 'left'; 
      } else { 
       right_e.style.display = 'block'; 
       left_e.style.display = 'none'; 
       top.visible_id = 'right'; 
      } 
      var t = setTimeout("toggle_visibility()",3000); 
      } 

      </script> 
     </head> 
     <body onload="toggle_visibility();"> 

     <div id="left" > 
      <iframe src="1.html"></iframe> 
     </div> 

     <div id="right" > 
      <iframe src="2.html"></iframe> 
     </div> 

     </body> 
     </html>

источник

2011-05-17 14:32:35 mezz

Как переключаться между двумя divs

ответ

Смежные вопросы