Hay un menú desplegable en mi página, y hay un cuadro de entrada de texto y un cuadro de carga de imagen. El cuadro de entrada de texto se muestra de forma predeterminada, mientras que el cuadro de carga de la imagen está oculto.
Supongamos que hay dos elementos A y B en el menú desplegable, quiero lograr este efecto: al hacer clic en A, se muestra el cuadro de entrada de texto y el cuadro de entrada de la imagen está oculto; Al hacer clic en B, se muestra el cuadro de carga de la imagen y el cuadro de entrada de texto está oculto . ¿Cómo implementarlo?
Al depurar con Firebug, descubrí que solo se ejecutarán unas pocas funciones de clic al cargar la página HTML. Después de cargar la página, haga clic en el elemento del menú desplegable y no se ejecutarán estos puntos de interrupción. ¿Qué está sucediendo?
Mi código JS es el siguiente (definido en la sección <BEAD>):
<script type = "text/javaScript"> // image_upload es la ID del cuadro de carga de imagen. Al principio, ocultarlo $ (documento) .Ready (function () {$ ("#image_upload"). Hide ();}); // text_only es un elemento de menú desplegable. Quiero que esta función implementa el cuadro de entrada de texto text_input al hacer clic en este elemento de menú // Mostrar el cuadro de entrada de texto text_input, ocultar el cuadro de carga de imagen image_upload $ ('#text_only'). Click (function (e) {$ ("#text_input"). Show (); $ ("#i mapage_upload"). Un elemento de menú desplegable. Al hacer clic en él, el cuadro de texto está oculto y se muestra el cuadro de carga de la imagen. */$ ('image_only'). Click (function () {$ ("#text_input"). hide (); $ ("#image_upload"). show ();}); </script>El código completo es el siguiente, me temo que la información anterior no es suficiente:
<! Doctype html> <html lang = "en"> <head> <title> hola, world </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-escala = 1.0"> <meta http-oquiv = "content-type" content = "text/html; charset = utf-8"/> <! href = "css/bootstrap.css" rel = "stylesheet" media = "pantalla"> <script src = "http://code.jquery.com/jquery.js"> </script> <script src = "js/bootstrap.min.js"> </script> <script src = "js/bootstrap-fileupload.js"> </script> <syle> .center {ancho: auto; visual {margin-top: 30px; display: table; margin-left: auto; margin-right: auto;} body {margin: 0; fondos: url ('img/955.jpg'); en segundo plano: 1440px 800px; background-repeat: no-repeat; visual 34px;} </style> <script type = "text/javaScript"> $ (documento) .Ready ( function () {$ ("#image_upload"). hide ();}); $ ('#text_only'). click (function (e) {$ ("#text_input"). show (); $ ("#image_upload"). hide (); e.stoppropagation ();}); $ ('image_only'). clic "). k (function () {$ ("#text_input"). hide (); $ ("#image_upload"). show ();}); $ ('supervisado'). click (function () {$ ("#text_input"). show (); $ ("#image_upload"). show ();}); </script> <script> tipo = "Text/JavaScript"> </script> </Head> <Body> <Body <h1> Hello, World </h1> <Div> <Stiv> <ul> <li> <a href = "#"> Home </a> </li> <li> id = "text_Only" href = "#"> text </a> </li> </ul> <li> <a data-toggle = "desplegable" href = "#"> multimodal <b> </b> </a> <ul> <ul> <li> data-toggle = "desplegable" href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "supervisado" href = "#"> supervisado </a> </li> <li> <a id = "uns-supervisado" href = "#"> sin supervisión </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </ul> < Fin de NavBar-> <viv> <form> <fieldset> <input id = "text_input" type = "text" placeholder = "text input"> </br> <div id = "image_upload" data-provides = "fileUpload"> <!-<input type = "Hidden" valor = "" name = ">-> <iv> <iv> <i> </i> <span> </span> </div> <span> <span> seleccione archivo </span> <span> cambie </span> <input type = "file"/> </span> <a href = "#" data-dismiss = "fileUpload"> eliminar </a> </div> </div> <botte type = "enviar"> buscar </boton> </br> </fieldset> </forma </divit> </div-div> </div. </body> </html>Bootstrap hace clic en el elemento del menú desplegable y muestra un nuevo código de implementación del cuadro de entrada. ¡Espero que sea útil para todos!