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

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

Вот мой 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>

javascript toggle jquery toggleclass
person Ryan Bennett    schedule 08.02.2011    source источник

Ответы (5)


arrow_upward
6
arrow_downward

Интерактивная демонстрация: 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>

JavaScript:

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

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

CSS (чтобы скрыть правильную загрузку DIV):

#right { display:none; }

Разместите код JavaScript внизу страницы.

    <script>
        $(function() {        
            // put jQuery code here    
        });
    </script>    
</body>

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

person Šime Vidas    schedule 08.02.2011
comment
По какой-то причине я скопировал точный код, и он не работает локально, но работает на jsfiddle.net. Влияет ли на это библиотека JQuery? - person Ryan Bennett; 08.02.2011
comment
@Ryan Вы также скопировали приведенный выше HTML-код? Где вы разместили код JavaScript (в HEAD или внизу BODY)? - person Šime Vidas; 08.02.2011
comment
Я скопировал HTML и поместил код JavaScript в заголовок, а HTML - в тело. - person Ryan Bennett; 09.02.2011
comment
Код @Ryan JavaScript в HEAD - плохая идея. Я дополню свой ответ инструкциями о том, где разместить код JavaScript. - person Šime Vidas; 09.02.2011
comment
Ок, отлично. Кроме того, для моих учебных целей (кодировал всего 2 месяца), не могли бы вы дать мне быстрое объяснение, почему ставить Javascript в голову - плохая идея? - person Ryan Bennett; 09.02.2011
comment
@Ryan Прочтите здесь: http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom-correct - person Šime Vidas; 09.02.2011
comment
Все заработало. Большое Вам спасибо. Именно так оно и было. Я очень ценю помощь. - person Ryan Bennett; 09.02.2011

arrow_upward
3
arrow_downward

Вот небольшой пример переключения между двумя HTML-документами. Функция сначала вызывается при загрузке тела. Вам нужно заменить 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>
person mezz    schedule 17.05.2011

arrow_upward
2
arrow_downward

Поскольку вы отметили вопрос jquery, я предполагаю, что вы открыты для решения jquery. Это сделает это очень просто. Посмотрите образец jsfiddle ниже ...

http://jsfiddle.net/VztjL/

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

person stephen776    schedule 08.02.2011

arrow_upward
1
arrow_downward

Во-первых, закрывающий тег для. Эти надоедливые вещи.

Во-вторых, вам нужно отслеживать текущий видимый 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>
person bbrame    schedule 08.02.2011

arrow_upward
0
arrow_downward

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

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

<div onclick="toggle_visibility('right');toggle_visibility('left');">
  Right
 </div>
person William    schedule 08.02.2011