Làm cách nào để ẩn/hiển thị thẻ div bằng JavaScript?

Question

Về cơ bản, tôi đang cố gắng tạo liên kết, khi được nhấn, sẽ ẩn thẻ div nội dung hiện tại và hiển thị một thẻ khác ở vị trí của nó, thật không may, khi tôi nhấp vào liên kết, thẻ div nội dung đầu tiên vẫn xuất hiện. Đây là đoạn mã HTML:

<div id="body"> 
<h1>Numbers</h1> 
</div> 
<div id="body1"> 
Body 1 
</div> 

đây là mã CSS:

#body 
{ 
height: 500px; 
width: 100%; 
margin: auto auto; 
border: solid medium thick; 
} 

#body1 
{ 
height: 500px; 
width: 100%; 
margin: auto auto; 
border: solid medium thick; 
display: hidden; 
} 

đây là mã JavaScript:

function changeDiv() 
{ 
document.getElementById('body').style.display = "hidden"; // hide body div tag 
document.getElementById('body1').style.display = "block"; // show body1 div tag 
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked 
} 

NB: Thẻ CSS được khai báo trong tập tin khác nhau

Answer 1

Bạn đã thử

document.getElementById('body').style.display = "none";

thay vì

document.getElementById('body').style.display = "hidden";?

Answer 2

Cân nhắc sử dụng jQuery. Cuộc sống dễ dàng hơn nhiều với $ ('body'). Hide(); $ ('body1'). hiển thị();

Answer 3

Sử dụng đoạn mã sau:

function hide { 
document.getElementById('div').style.display = "none"; 
} 
function show { 
document.getElementById('div').style.display = "block"; 
} 

Answer 4

chỉ cần sử dụng một jquery kiện listner, nhấp vào sự kiện. để cho các lớp liên kết được lb ... tôi đang xem xét cơ thể như một div như bạn nói ...

$('.lb').click(function() { 
    $('#body1').show(); 
    $('#body').hide(); 
}); 

Answer 5

thử yo viết document.getElementById ('id'). Style.visibility = "ẩn";

Answer 6

Bạn có thể Ẩn/Hiện Div bằng chức năng Js. mẫu dưới đây

<script> 
     function showDivAttid(){ 

      if(Your Condition) 
      { 
      document.getElementById("attid").style.display = 'inline'; 
      } 
      else 
      { 
      document.getElementById("attid").style.display = 'none'; 
      } 

     } 

    </script> 

HTML - Hiện/Ẩn nội dung này

Answer 7

Đặt HTML của bạn như

<div id="body" hidden=""> 
<h1>Numbers</h1> 
</div> 
<div id="body1" hidden="hidden"> 
Body 1 
</div> 

Và bây giờ thiết lập javascript như

 function changeDiv() 
     { 
     document.getElementById('body').hidden = "hidden"; // hide body div tag 
     document.getElementById('body1').hidden = ""; // show body1 div tag 
     document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
     // display text if JavaScript worked 
     } 

Kiểm tra, nó hoạt động.