2010-10-18 12 views
8

Vâng, sau một giờ giới thiệu về javascript, tôi đã đưa ra mã sau đây. Nó đã làm những gì tôi muốn, nhưng sau đó tôi muốn cái gì khác và nó sẽ không hoạt động.hiển thị có điều kiện các dạng phần tử html

Tôi muốn rằng khi nhấp vào nút, một trường nhất định sẽ ẩn và nhấp vào một khác, một số khác sẽ ẩn quá, NHƯNG, tất nhiên, nó phải tạo chương trình khác, nếu không chúng tôi sẽ kết thúc với không có gì và mục đích là để trình bày các lĩnh vực khác nhau tùy thuộc vào những gì người dùng nhấp vào (trên một nút radio) Vì vậy, trong một cách trẻ con tôi đã thực hiện mã của tôi và nó làm việc. Nhưng sau đó nó đến với tôi rằng tôi muốn đầu tiên có cả hai lĩnh vực ẩn thay vì cả hai lĩnh vực được hiển thị, và đây là vấn đề. Tôi đã thêm giá trị 0 vào tham số của hàm "nói cho nó" rằng khi x = 0, thì hiển thị = ẩn. Nhưng nó sẽ không lắng nghe tôi !, Vì vậy, một phần của mã khi nó nói x = 1 và 2 hoạt động, một khoảng 0, thì không.

Đó là một mã đơn giản có thể khiến ai đó cười, nhưng heck, nó đã được làm sạch và nó hoạt động. Có ai biết làm thế nào để có các lĩnh vực ẩn trước khi bấm vào các nút?

Thanks a lot tôi loại bỏ một số thẻ của HTML

<html> 
    <head> 
     <script language="javascript"> 
      var x = 0; 

      function hola(x) { 
       if(x == 0) { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="hidden"; 
       } 

       if(x == 1) { 
        document.getElementById("cont1").style.visibility="visible"; 
        document.getElementById("cont2").style.visibility="hidden"; 
       } 

       if(x == 2) { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="visible"; 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <input type="button" onclick="hola(1)" value="hidefield2" id="boton1"> 
     <div id="cont1"> 
      <input type="text"> 
     </div> 

     <input type="button" onclick="hola(2)" value="hidefield1" id="boton2"> 

     <div id="cont2"> 
      <input type="text"> 
     </div> 
    </body> 
<html> 
+0

Đừng bạn nghĩ rằng bạn thực sự nên gọi ** hàm với 0 như một tham số tại một số điểm? – Pointy

+0

Xin chào, cảm ơn bạn đã dành thời gian xem qua câu hỏi của tôi. Theo nhận xét của bạn, tôi nghĩ rằng tôi đã làm điều đó ngay từ đầu, tôi đã đặt x = 0, nhưng bây giờ bạn nói nó, tôi đang nghĩ rằng biến đó không có sức mạnh để vượt qua dòng đầu của chức năng, có nghĩa là, hàm có thể không biết về sự xác nhận của 0 đến x dòng ở trên. Vì vậy, nếu mặc định là tự nhiên, khả năng hiển thị có thể nhìn thấy, đó là lý do tại sao và vì không có thêm sự khẳng định thì nó vẫn tồn tại. Sau đó, lời giải thích cho hành vi có thể là giá trị X = 0 được khai báo trước hàm không phải là toàn cục. – Alvaro

Trả lời

6

làm việc:
Bạn có hai nút, cả hai có thể nhìn thấy ngay từ đầu . Và khi nhấp vào một nút, bạn đã ẩn một div và hiển thị một nút khác.

Bây giờ bạn cần một tình huống khi các div nên được ẩn trong đầu, và sau đó hiển thị khi bạn nhấp vào một nút.

Theo mặc định, đối với tất cả các thành phần không được cung cấp thuộc tính rõ ràng visibility, visibility được coi là visible.

Để ẩn nút, bạn cần thêm visibility:hidden vào nút.

Bạn có thể làm điều đó theo hai cách:

  1. trong mã cho div s, chắc rồi "vô hình theo mặc định" bằng cách thêm style='visibility:hidden'.

  2. Thêm một chức năng javascript đó được gọi là trên tải của trang, và làm cho cả hai divs vô hình:

    function hideBoth() 
    { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="hidden" ; 
    } 
    

Gọi nó trên tải trang của bạn: <body onload='hideBoth()'>

+0

Cảm ơn cả hai người bình luận: Kết luận của tôi sau khi đã làm việc với đề xuất của bạn là: 1) Tôi nghĩ nguyên nhân của vấn đề là việc xác nhận x = 0 sẽ không hoạt động mặc dù rõ ràng có một cuộc gọi đến đó là X được đặt bên ngoài ở trên trước khi bắt đầu chức năng. 2) Nếu tôi mã hóa nội dòng hiển thị ẩn trong thẻ html, mặc dù nó đã ẩn nó, nó sẽ không hiển thị khi nhấp vào các nút. 3) Cuối cùng, các cuộc gọi onload đến chức năng từ cơ thể và thêm chức năng hideboth đã làm các trick. Cảm ơn nhiều. Alvaro – Alvaro

3

dòng này:

document.getElementById("cont1").style.visibility="hidden"; 

Thêm này:

style="visibility: hidden;" 

này:

<div id="cont1"> 

để làm cho nó trông như thế này:

<div id="cont1" style="visibility: hidden;"> 

Bạn có thể làm điều này cho mình, chỉ bằng cách thêm thuộc tính vào thẻ html của bạn.


Oh yeah, và điều này:

<div id="cont1"> 

cũng giống như thế này:

<div id="cont1" style="visibility: visible;">