Há um menu suspenso na minha página e há uma caixa de entrada de texto e uma caixa de upload de imagem. A caixa de entrada de texto é exibida por padrão, enquanto a caixa de upload da imagem está oculta.
Suponha que haja dois itens A e B no menu suspenso, quero alcançar esse efeito: Ao clicar em A, a caixa de entrada de texto é exibida e a caixa de entrada da imagem está oculta; Ao clicar em B, a caixa de upload da imagem é exibida e a caixa de entrada de texto está oculta . Como implementá -lo?
Ao depurar com o Firebug, descobri que apenas algumas funções de cliques serão executadas ao carregar a página HTML. Depois que a página for carregada, clique no item de menu suspenso e esses pontos de interrupção não serão executados. O que está acontecendo?
Meu código JS é o seguinte (definido na seção <head>):
<script type = "text/javascript"> // image_upload é o ID da caixa de upload de imagem. No começo, oculta-o $ (document) .ready (function () {$ ("#image_upload"). Hide ();}); // text_only é um item de menu suspenso. Eu quero que esta função implemente a caixa de entrada de texto text_input Ao clicar neste item de menu // Mostrar a caixa de entrada Texto Text_input, oculte a imagem da caixa de upload da imagem image_upload $ ('#text_only'). Clique (function (e) {$ ("#text_input"). Show () $ ("#i I mapage_upload "). hide (); e.stopPropagation ();});/*image_only é um item de menu suspenso. Ao clicar nela, a caixa de texto está oculta e a caixa de upload da imagem é exibida. */$ ('image_only'). clique (function () {$ ("#text_input"). hide (); $ ("#image_upload"). show ();}); </script>O código completo é o seguinte, receio que as informações acima não sejam suficientes:
<! Doctype html> <html lang = "en"> <head> <title> olá, mundo </ititle> <meta name = "viewport" content = "width = width, link inicial/spin-scale = 1.0"> <meta http-equiv = "content-type"/"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> </script> </script> </script> </script> </script> src = "js/bootstrap-fileupLoad.js"> </sCript> <style> .center {width: Auto; display: tabela; margem-top: 150px; margem-left: automático; margem-direita: auto;}. center de texto {margin-top: 30px; display: tabela; margem-esquerda: auto; margem-right: auto;} corpo {margin: 0; fundo: url ('img/955.jpg'); background-size: 1440px 800px; background-reeat: no-reepat; 34px;} </style> <script type = "text/javascript"> $ (document) .ready ( function () {$ ("#image_upload"). hide ();}); $ ('#text_only'). clique (function (e) {$ ("#text_input"). show (); $ ("#image_upload"). hide (); e.stopPropagation ();}); k (function () {$ ("#text_input"). hide (); $ ("#image_upload"). show ();}); $ ('supervisionado'). clique (function () {$ ("#text_input"). show (); $ ("#image_upload"). show ();); type = "text/javascript"> </script> </head> <body> <h1> olá, mundo </h1> <div> <div> <ul> <li> <a href = "#"> home </a> </li> <li> <a-tat--toggle = tropdown "href ="#"> <li> bliModal <a- b> blemodal <a-toggle =" href = "#"> <li> bliModal <b> b> bli> <a data-toggle = "href ="#"> <li> id = "text_only" href = "#"> text </a> </li> </ul> <li> <a data-toggle = "suspenso" href = "#"> multimodal <b> </b> <lli> <ul> <li> <a id = "text_only" href = "" </a> <ul> data-toggle = "suspenso" href = "#"> multimodal <b> </b> </a> <ul> <li> <a id = "supervisionado" href = "#"> supervisionado </a> </li> <li> <a id = "unsupervised" href = "#"> <li> <li> Fim do NavBar-> <div> <form> <dieldset> <input id = "text_input" type = "text" placeholder = "entrada de texto"> </br> <div id = "image_upload" data-provides = "fileUpload"> <! </span> </span> </div> <pan> <pan> selecione Arquivo </span> <pan> altere </span> <input type = "file"/> </span> <a href = "#" data-Dismiss = "fileupload"> remover </a> </div> </diviss> <buteriEld) </body> </html>O Bootstrap clica no item de menu suspenso e exibe um novo código de implementação da caixa de entrada. Espero que seja útil para todos!