내 페이지에 드롭 다운 메뉴가 있으며 텍스트 입력 상자와 이미지 업로드 상자가 있습니다. 텍스트 입력 상자는 기본적으로 표시되며 이미지 업로드 상자는 숨겨져 있습니다.
드롭 다운 메뉴에 두 가지 항목 A와 B가 있다고 가정합니다.이 효과를 달성하고 싶습니다. A를 클릭하면 텍스트 입력 상자가 표시되고 이미지 입력 상자가 숨겨져 있습니다. B를 클릭하면 이미지 업로드 상자가 표시되고 텍스트 입력 상자가 숨겨져 있습니다 . 구현하는 방법?
FireBug로 디버깅 할 때 HTML 페이지를로드 할 때 몇 번의 클릭 기능 만 실행되는 것을 발견했습니다. 페이지가로드되면 드롭 다운 메뉴 항목을 클릭하면 이러한 중단 점이 실행되지 않습니다. 무슨 일이야?
내 JS 코드는 다음과 같습니다 (<head> 섹션에 정의 됨) :
<script type = "text/javaScript"> // image_upload는 이미지 업로드 상자의 ID입니다. 처음에는 $ (document) .ready (function () {$ ( "#image_upload"). hide ();}); // text_only는 드롭 다운 메뉴 항목입니다. 이 메뉴 항목을 클릭 할 때 텍스트 입력 상자 Text_Input을 구현하고 싶습니다. // 텍스트 입력 상자 텍스트 텍스트 표시를 표시하고 이미지 업로드 상자를 숨기고 이미지 업로드 image_upload $ ( '#text_only'). 클릭 (function (e) {$ ( "#text_input"). show (); $ ( "#i mapage_upload"; 드롭 다운 메뉴 항목. 클릭하면 텍스트 상자가 숨겨져 있고 이미지 업로드 상자가 표시됩니다. */$ ( 'im전체 코드는 다음과 같습니다. 위의 정보만으로는 충분하지 않습니다.
<! docType html> <html lang = "en"> <head> <title> hello, world, world </title> <meta name = "viewport"content = "width = device-width, device-width, 초기 스케일 = 1.0"> <meta http-equiv = "content-type"content = "text/html; href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script src = "http://code.jquery.com/jquery.js"> </script> <script src = "js/bootstrap.min.js"> <script> <script src = "js/bootstrap-fileupload.js"> </script> <style> .center {width : auto; display : table; margin-top : 150px; margin-left : auto; auto;}. 텍스트 센터 {마진-탑 : 30px; 디스플레이 : 테이블; 마진-왼쪽 : 자동; 마진-오른쪽 : auto;} body {margin : 0; 배경 : URL ( 'IMG/955.jpg'); 배경 크기 : 1440px 800px; 배경 반복 : no-repeat; display : compact : begrance-{prantpy;} 34px;} </style> <script type = "text/javaScript"> $ (document) .ready ( function () {$ ( "#image_upload"). hide ();}); $ ( '#text_only'). 클릭 (function (e) {$ ( "#text_input"). show (); $ ( "#image_upload") k (function () {$ ( "#text_input"). hide (); $ ( "#image_upload"). show ();}); $ ( 'supervised'). click (function () {$ ( "#text_input"). show (); $ ( "#image_upload"); </script> <Script> "text/javaScript"> </script> </head> <h1> <h1> 안녕하세요, 세계 </h1> <div> <li> <li> <a href = "#"> home </a> </li> <li> <a data-toggle = "dropdown"href = "#"> Singlemodal <b> </b> </b> <ul>> <li> id = "text_only"href = "#"> text </a> </li> </ul> <li> <data-toggle = "dropdown"href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "text_only"href = "#"ad data-toggle = "dropdown"href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "supervised"href = "#"> 감독 </a> </li> <li> <a id = "unsupervised"href = "#"> supervised </a> </li> </ul> </li> </ul> </div> <!-navbar의 끝-> <div> <form> <fieldset> <입력 ID = "text_input"type = "text"placeholder = "text input"> </br> <div = "image_upload"data-provides = "fileUpload"> <input type = "" "" "" "" "> -> <div> <div> <i> </i> <span> </span> </div> <span> <span> 파일 선택 </span> <span> 변경 </span> <input type = "file"/> </span> <a href = "#"data-dismiss = "fileUpload"> 제거 </a> </div> <버튼 유형 "> 검색"> 검색 </button> </br> </fieldset> </form> </div> </div> </body> </html>부트 스트랩은 드롭 다운 메뉴 항목을 클릭하고 새로운 입력 상자 구현 코드를 표시합니다. 나는 그것이 모두에게 도움이되기를 바랍니다!