Как я могу добавить и исчезнуть между двумя содержимым на одной странице, используя JavaScript? - PullRequest
Новая
       53

Как я могу добавить и исчезнуть между двумя содержимым на одной странице, используя JavaScript?

1 голос
/ 16 января 2012

Я разрабатываю страницу в JSP.Он имеет 3 компонента: верхний колонтитул, контент и нижний колонтитул.Я хочу, чтобы, когда эта страница загружалась, часть Контента должна была быть превращена в контент по умолчанию, то есть Домашнюю Страницу, которая содержит кнопку для регистрации, входа и кредитов сайта.Когда пользователь нажимает кнопку регистрации, содержимое в части содержимого должно исчезать и исчезать, а затем содержимое формы регистрации должно исчезать и отображаться.То же самое для других кнопок, но не должно быть никаких изменений в верхнем и нижнем колонтитуле.Пожалуйста, помогите !!!

Ответы [ 3 ]

1 голос
/ 16 января 2012

С использованием jQuery ... У вас есть рабочий пример там ...

0 голосов
/ 16 января 2012

Используя JQuery, вы можете скрыть div, используя селектор и метод hide(). Например: 

<html>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script type="text/javascript">
      function swap_divs() {
        $("#div_to_hide").hide();
        $("#div_to_show").show();
      }
   </script>
   <body>
     <div id="div_to_hide">
       Some text for div to hide
     </div>
     <div id="div_to_show" style="display: none;">
       Some text for div to show
     </div>
     <button onClick="swap_divs();">Click me</button>
   </body>
</html>

Если вы посмотрите на веб-сайт JQuery , вы можете найти больше примеров и обширную документацию. Также для затухания / затухания.

0 голосов
/ 16 января 2012

Я бы рекомендовал использовать библиотеку JavaScript для достижения этой цели.

jQuery имеет встроенные способности затухания. 

<div id="clickme">
      Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />
    With the element initially hidden, we can show it slowly:
    $('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });
...