Làm cách nào để ẩn/hiển thị div khi nút được nhấp?

Tôi có một div chứa trình hướng dẫn đăng ký và tôi cần ẩn/hiển thị số div này khi một nút được nhấp. Tôi có thể làm như thế nào?Làm cách nào để ẩn/hiển thị div khi nút được nhấp?

Dưới đây tôi hiển thị cho bạn mã.

Cảm ơn :)

<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">&nbsp;</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>&nbsp;</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>&nbsp;</td> 
      </tr>           
     </table>    
    </div>

Nguồn

2013-04-30 Julia

thể trùng lặp của http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button –

Sử dụng JQuery. Bạn cần thiết lập một sự kiện nhấp chuột trên nút của bạn, điều này sẽ chuyển đổi chế độ hiển thị của div trình hướng dẫn của bạn.

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

Tham khảo trang web JQuery để biết thêm thông tin.

Điều này cũng có thể được thực hiện mà không cần JQuery. Chỉ sử dụng JavaScript chuẩn:

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

Sau đó thêm vào nút được sử dụng để hiển thị và ẩn div.

Nguồn

2013-04-30 20:55:46 wellers

Tôi nghĩ rằng OP đang tìm kiếm một giải pháp dễ dàng hơn việc phải sử dụng thư viện của bên thứ ba (jQuery không được gắn thẻ). Điều này có thể được thực hiện mà không cần JQuery. –

Chỉ cần một lưu ý cho OP: sử dụng 'khả năng hiển thị: hidden/visible;' khi bạn không muốn div #wizard không gian trống cho các phần tử khác. Sử dụng 'display: none/block;' nếu bạn muốn div #wizard bị ẩn với các thuộc tính size, margin & padding tương đương với 0 khi bị ẩn. – Tyblitz

Điều này không thể thực hiện chỉ với HTML/CSS. Bạn cần sử dụng javascript ở đây. Trong jQuery nó sẽ là:

$('#button').click(function(e){ 
    e.preventDefault(); //to prevent standard click event 
    $('#wizard').toggle(); 
});

Nguồn

2013-04-30 21:00:13

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

    var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>'; 
    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> 
</head> 
<body> 
    <div id="showhide"></div> 
    <div id="hide_show"> 
     <p>This div will be show and hide on button click</p> 
    </div> 
</body> 
</html>

Nguồn

2014-03-07 09:36:51 dimitryous

nhiệm vụ có thể được thực hiện javascript đơn giản mà không jQuery, vv

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

Chức năng này rất đơn giản nếu tuyên bố rằng trông nếu thuật sĩ có lớp swMain và đổi lớp thành swHide và nếu không, không phải là swMain rồi đổi thành swMain. Mã này không hỗ trợ nhiều thuộc tính lớp nhưng trong trường hợp này nó chỉ là đủ.

Bây giờ bạn có để làm cho lớp css tên swHide có display: none

Sau đó thêm vào nút onclick = "showhide()"

Vì vậy, dễ dàng.

Nguồn

2014-08-09 14:18:30 JarnoV

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

nếu bạn muốn bắt đầu với div ẩn, bạn nên thêm style="display:none;", như thế này:

<div style="display:none;"> </div>

Nguồn

2015-01-28 05:32:22 Jlcanizales

này hoạt động:

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

<!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    
 
    \t <a href="javascript:showhide('uniquename')"> 
 
    \t \t Click to show/hide. 
 
    \t </a> 
 
    
 
    \t <div id="uniquename" style="display:none;"> 
 
    \t \t <p>Content goes here.</p> 
 
    \t </div> 
 
    
 
    </body> 
 
    </html>

Nguồn

2015-02-03 20:13:30 xpt

Cảm ơn vì giải pháp dễ dàng và hiệu quả :) –

Bạn có thể làm điều này hoàn toàn với html và cs và tôi có.

HTML Trước tiên, bạn cung cấp cho các div bạn muốn ẩn một ID để nhắm mục tiêu như #view_element và một lớp học để nhắm mục tiêu như #hide_element. Bạn có thể nếu bạn muốn làm cho cả hai lớp này nhưng tôi không biết nếu bạn có thể làm cho cả hai ID. Sau đó, có nút Hiển thị của bạn nhắm mục tiêu id chương trình của bạn và nút Ẩn của bạn nhắm mục tiêu lớp ẩn của bạn. Đó là nó cho html ẩn và hiển thị được thực hiện trong CSS.

CSS Các css để hiển thị và ẩn này nên giống như thế này

#hide_element:target { 
    display:none; 
} 

.show_element:target{ 
    display:block; 
}

này sẽ cho phép bạn để ẩn và các yếu tố chương trình theo ý thích. Điều này sẽ làm việc độc đáo trên nhịp và divs.

Nguồn

2015-05-11 16:36:32

Các giải pháp sau đây là:

ngắn nhất. Hơi giống với here. Nó cũng tối thiểu: Bảng trong DIV là trực giao với câu hỏi của bạn.
nhanh nhất: getElementById được gọi một lần ngay từ đầu. Điều này có thể hoặc có thể không phù hợp với mục đích của bạn.
Nó sử dụng JavaScript thuần túy (nghĩa là không có JQuery).
Sử dụng button. Hương vị của bạn có thể thay đổi.
có thể mở rộng: sẵn sàng thêm nhiều DIV, chia sẻ mã.

mydiv = document.getElementById("showmehideme"); 
 

 
function showhide(d) { 
 
    d.style.display = (d.style.display !== "none") ? "none" : "block"; 
 
}

#mydiv { background-color: #ddd; }

<button id="button" onclick="showhide(mydiv)">Show/Hide</button> 
 
<div id="showmehideme"> 
 
    This div will show and hide on button click. 
 
</div>

Nguồn

2017-06-26 20:29:46 Calaf

Làm cách nào để ẩn/hiển thị div khi nút được nhấp?

Trả lời

Các vấn đề liên quan