Как я могу Скрыть/показать div при нажатии кнопки?

У меня есть див, которая содержит мастер регистра, а мне нужно Скрыть/показать это див при нажатии кнопки. Как я могу это сделать?

Ниже я покажу вам код.

Спасибо :)

  <div id="wizard" class="swMain">
    <ul>
      <li><a href="#step-1">
            <label class="stepNumber">1</label>
        </a></li>
      <li><a href="#step-2">
            <label class="stepNumber">2</label>
        </a></li>
      <li><a href="#step-3">
            <label class="stepNumber">3</label>
         </a></li>
      <li><a href="#step-4">
            <label class="stepNumber">4</label>
        </a></li>
    </ul>
    <div id="step-1"> 
        <h2 class="StepTitle">Perfil</h2>
        <table cellspacing="3" cellpadding="3" align="center">
            <tr>
                  <td align="center" colspan="3"> </td>
            </tr>        
            <tr>
                  <td align="right">Username :</td>
                  <td align="left">
                    <input type="text" id="username" name="username" value="" class="txtBox">
                  </td>
                  <td align="left"><span id="msg_username"></span> </td>
            </tr>
            <tr>
                  <td align="right">Password :</td>
                  <td align="left">
                    <input type="password" id="password" name="password" value="" class="txtBox">
                  </td>
                  <td align="left"><span id="msg_password"></span> </td>
            </tr>                                          
       </table>               
    </div>
chiapa
Редактировал вопрос 16-го июня 2014 в 2:17
Программирование
button html hide show
30-го апреля 2013 в 8:51
38 просмотров
Комментарии к вопросу (1)
Решение

Использовать JQuery. Вам нужно создать событие нажатия на кнопку, которая будет переключать видимость вашего мастер див.

$('#btn').click(function() {
    $('#wizard').toggle();
});

Обратитесь к с jQuery сайт для получения дополнительной информации.

Это также можно сделать без jQuery. Используя только стандартный 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>

Затем добавить функция onclick="по toggle_visibility(&#39;id_of_element_to_toggle&#39;);" в к кнопка, которая используется, чтобы показать и скрыть элемент div.

Francesco Menzani
Редактировал ответ 26-го июня 2016 в 11:41
Комментарии (2)

Это работает:

в 

     function showhide(id) {
        var e = document.getElementById(id);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
     }




        <a href="javascript:showhide('uniquename')">
            Click to show/hide.
        </a>

        <div id="uniquename" style="display:none;">
            <p>Content goes here.</p>
        </div>

в

PiggyPlex
Редактировал ответ 4-го января 2017 в 2:46
Комментарии (1)

Это может'т быть сделано с помощью HTML и CSS. Вам нужно использовать JavaScript здесь. В jQuery это будет:

$('#button').click(function(e){
    e.preventDefault(); //to prevent standard click event
    $('#wizard').toggle();
});
Комментарии (0)


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Show and hide div with JavaScript
<script>

    var button_beg = '', button_end = '';
    var show_button = 'Show', hide_button = 'Hide';
    function showhide() {
        var div = document.getElementById( "hide_show" );
        var showhide = document.getElementById( "showhide" );
        if ( div.style.display !== "none" ) {
            div.style.display = "none";
            button = show_button;
            showhide.innerHTML = button_beg + button + button_end;
        } else {
            div.style.display = "block";
            button = hide_button;
            showhide.innerHTML = button_beg + button + button_end;
        }
    }
    function setup_button( status ) {
        if ( status == 'show' ) {
            button = hide_button;
        } else {
            button = show_button;
        }
        var showhide = document.getElementById( "showhide" );
        showhide.innerHTML = button_beg + button + button_end;
    }
    window.onload = function () {
        setup_button( 'hide' );
        showhide(); // if setup_button is set to 'show' comment this line
    }
</script>


    <div id="showhide"></div>
    <div id="hide_show">
        <p>This div will be show and hide on button click</p>
    </div>
Комментарии (0)

Следующие решения:

  • короткий. Несколько похож на здесь. Это's также минимальный: таблица в div является ортогональной на ваш вопрос.
  • быстрый: метода getElementById вызывается один раз в самом начале. Это может или может не подходить для ваших целей.
  • Он использует чистый JavaScript (то есть без jQuery).
  • Он использует кнопка. Ваш вкус может меняться.
  • расширяемый: это's готовы добавить больше ДИВС, разделяя код.

в 

mydiv = document.getElementById("showmehideme");

function showhide(d) {
    d.style.display = (d.style.display !== "none") ? "none" : "block";
}
#mydiv { background-color: #ddd; }
Show/Hide
<div id="showmehideme">
    This div will show and hide on button click.
</div>

в

Комментарии (3)
 $('#btn').click(function() {
     $('#wizard').toggle(); 
 });

если вы хотите, чтобы начать с див скрытые, вы должны добавить стиль=то"дисплей:нет; с", как это:

<div style="display:none;"> </div>
Pang
Редактировал ответ 28-го января 2015 в 6:23
Комментарии (0)

Вы можете делать это исключительно с HTML и CSS, и у меня.

В формате HTML Сначала вы даете дел, которые вы хотите скрыть идентификатор на цель, как #view_element и класс цели, как#hide_element`. Вы можете, если вы хотите сделать обе из этих классов, но я не'т знать, если вы можете сделать их оба идентификатора. То есть кнопка Показать цель вашего шоу ID и ваш скрыть целевые кнопку Скрыть класс. Это HTML-код на скрытие и отображение сделано в CSS.

УСБ В CSS, чтобы показать и скрыть это должно выглядеть примерно так

#hide_element:target {
    display:none;
}

.show_element:target{
    display:block;
}

Это должно позволить вам скрывать и отображать элементы по желанию. Это должно хорошо работать на перегонах и ДИВС.

micbobo
Редактировал ответ 11-го мая 2015 в 5:11
Комментарии (1)

Задача может быть простой JavaScript без jQuery и т. д.

<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>

Эта функция является простым, если заявление о том, что выглядит если мастер класс swMain и классовые изменения swHide и еще, если это's не swMain меняем на swMain. Этот код не'т поддерживать несколько атрибутов класса, но в данном случае это просто достаточно.

Теперь вы должны сделать CSS-класс с именем swHide что дисплей: нет

Затем добавить на кнопку *функция onclick="в showhide () на"**

Так это легко.

Комментарии (0)