Ada menu tarik-turun di halaman saya, dan ada kotak input teks dan kotak unggahan gambar. Kotak input teks ditampilkan secara default, sedangkan kotak unggahan gambar disembunyikan.
Misalkan ada dua item A dan B di menu tarik-turun, saya ingin mencapai efek ini: saat mengklik A, kotak input teks ditampilkan dan kotak input gambar disembunyikan; Saat mengklik B, kotak unggahan gambar ditampilkan dan kotak input teks disembunyikan . Bagaimana cara mengimplementasikannya?
Ketika debugging dengan Firebug, saya menemukan bahwa hanya beberapa fungsi klik yang akan dieksekusi saat memuat halaman HTML. Setelah halaman dimuat, klik item menu tarik-turun, dan breakpoint ini tidak akan dieksekusi. Apa yang terjadi?
Kode JS saya adalah sebagai berikut (didefinisikan di bagian <head>):
<type skrip = "text/javascript"> // Image_upload adalah ID dari kotak unggahan gambar. Pada awalnya, sembunyikan $ (dokumen) .ready (function () {$ ("#image_upload"). Hide ();}); // text_only adalah item menu tarik-turun. Saya ingin fungsi ini mengimplementasikan kotak input teks Text_input saat mengklik item menu ini // Tampilkan kotak input teks Text_input, sembunyikan kotak unggahan gambar Image_Upload $ ('#text_only'). Klik (fungsi (e) {$ ("#Text_input"). Tampilkan (); $ ("#i Mapage_Upload". Item menu tarik-turun. Saat mengkliknya, kotak teks disembunyikan dan kotak unggahan gambar ditampilkan. */$ ('Image_Only'). Klik (function () {$ ("#text_input"). Hide (); $ ("#Image_Upload"). Show ();}); </Script>Kode lengkapnya adalah sebagai berikut, saya khawatir informasi di atas tidak cukup:
<! Doctype html> <html lang = "en"> <head> <title> halo, dunia </itement> <meta name = "viewport" content = "width = perangkat-lebar, skala awal = 1.0"> <meta http-equiv = "content-type" content = "Teks/teks/html; charset = uTsp-uiv-quiv =" content-type "content =" Text/Text/html; charset = uTSet = 8 "Content" content "content =" Text/html; charset = uTset = 8 "content" content "content =" Text/html; charset = uTSet = 8 "content/content link/content/content =" Text/html; charset = uTset-8 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 = "js/bootstrap.min.js"> </script> Script = "js/bootstrap.min.js"> </Script> src = "js/bootstrap-fileupload.js"> </script> <tyle> .center {width: auto; display: tabel; margin-top: 150px; margin-kiri: auto; margin-kanan: auto;}. {margin-top: 30px; display: table; margin-left: auto; margin-right: auto;} body {margin: 0; latar belakang: url ('img/955.jpg'); latar belakang-ukuran: 1440px 800px; latar belakang-repeat: no-repeat; display: compact; latar belakang-kolor compact 800px; latar belakang-repeat: no-repeat; display: compact; latar belakang colding-colding; latar belakang. 34px;} </style> <script type = "text/javascript"> $ (dokumen) .ready ( function () {$ ("#image_upload"). Hide ();}); $ ('#text_only'). Klik (fungsi (e) {$ ("#text_input"). Show (); $ ("#image_upload"). Sembunyikan (); e.stoppropagation ();}); $ (gambar ") k (function () {$ ("#text_input"). hide (); $ ("#image_upload"). show ();}); $ ('diawasi'). klik (function () {$ ("#text_input"). Tampilkan (); $ ("#gambar_upload"). Show ();}); </scriple; type="text/javascript"></script></head><body><h1>hello,world</h1><div><div><ul><li><a href="#">Home</a></li><li><a data-toggle="dropdown" href="#">Singlemodal<b> </b> </a><ul > <li><a id="text_only" href="#">Text</a> </li></ul><li><a data-toggle="dropdown" href="#">Multimodal<b> </b> </a><ul > <li><a id="text_only" href="#">Text</a> </li></ul><li><li><a Data-koggle = "dropdown" href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "diawasi" href = "#"> diawasi </a> </li> <li> </a> </a> </ul tidak divisvisi "href ="#"> tidak dapat menular </a> </a> </ul tidak supervisi </ul tidak supervised </ul tidak tahu </ulpupervised" href = "#"> Akhir navbar-> <div> <norm> <fieldset> <input id = "text_input" type = "text" placeholder = "input teks"> </br> <div id = "gambar_upload"-provides = "fileupload"> <!-<input type = "hidden" value = "" name = "">-> <! <span> </span> </div> <span> <span> Pilih file </span> <span> ubah </span> <input type = "file"/> </span> <a href = "#" data-dismiss = "fileupload"> </a> </div> </div> <kancing tipe = "kirim" pencarian </kancing </a> </div> </div> <tombol type = "Submit"> Search "> KOMPIT> </A> </DIV> </Div> <Tombol TYPE =" SUBIT "> LUARTAN </BUTT/BUTTRET> </DIVED> </DIV> <FORDS =" KOMPIT "> LUBUT </a> </dv </body> </html>Bootstrap mengklik item menu tarik-turun dan menampilkan kode implementasi kotak input baru. Saya harap ini akan membantu semua orang!