我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的.
假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框；点击B时显示图像上传框,隐藏文本输入框,请问怎么实现?
用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事.
我的js代码如下(定义在<head>部分中):
<script type="text/javascript"> //image_upload是图片上传框的id,最开始时把它隐藏 $(document).ready( function(){ $("#image_upload").hide(); } ); //text_only是下拉菜单项,我想这个函数来实现点击这个菜单项时 //显示文本输入框text_input,隐藏图片上传框image_upload $('#text_only').click(function(e){ $("#text_input").show(); $("#image_upload").hide(); e.stopPropagation(); } ); /* image_only是下拉菜单项,点击它时隐藏文本框,显示图片上传框 */ $('image_only').click(function(){ $("#text_input").hide(); $("#image_upload").show(); }); </script>
完整的代码如下,怕上面的信息还不够:
<!DOCTYPE html> <html lang="en"> <head> <title> hello,world</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-fileupload.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; margin-right: auto; } .text-center { margin-top:30px; display:table; margin-left:auto; margin-right:auto; } body{ margin:0; background: url('img/955.jpg'); background-size: 1440px 800px; background-repeat: no-repeat; display: compact; background-color: transparent; } .btn-large{ padding: 14px 34px; } </style> <script type="text/javascript"> $(document).ready( function(){ $("#image_upload").hide(); } ); $('#text_only').click(function(e){ $("#text_input").show(); $("#image_upload").hide(); e.stopPropagation(); } ); $('image_only').click(function(){ $("#text_input").hide(); $("#image_upload").show(); }); $('supervised').click(function(){ $("#text_input").show(); $("#image_upload").show(); } ); </script> <script type="text/javascript"> </script> </head> <body> <h1>hello,world</h1> <div> <div> <div> <ul> <li> <a href="#">首页</a> </li> <li> <a data-toggle="dropdown" href="#" > 单模态 <b> </b> </a> <ul > <li><a id="text_only" href="#">文本 </a> </li> <li><a id="image_only" href="#">图像 </a> </li> </ul> </li> <li> <a data-toggle="dropdown" href="#"> 多模态 <b> </b> </a> <ul > <li><a id="supervised" href="#">有监督 </a> </li> <li><a id="unsupervised" href="#">无监督 </a> </li> </ul> </li> </ul> </div> </div><> <div> <form> <fieldset> <input id="text_input" type="text" placeholder="Text input"> </br> <div id="image_upload" data-provides="fileupload"> <> <div> <div> <i></i> <span></span> </div> <span> <span>Select file</span> <span>Change</span> <input type="file" /> </span> <a href="#" data-dismiss="fileupload">Remove</a> </div> </div> <button type="submit"> Search </button> </br> </fieldset> </form> </div> </div> </body> </html>
BootStrap点击下拉菜单项后显示一个新的输入框实现代码，希望对大家有所帮助！