BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016-05-16 12:06
816 查看
我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的.
假设下拉菜单有两项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 class="container"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="active"> <a href="#">首页</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" > 单模态 <b class="caret"> </b> </a> <ul class="dropdown-menu" > <li><a id="text_only" href="#">文本 </a> </li> <li><a id="image_only" href="#">图像 </a> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 多模态 <b class="caret"> </b> </a> <ul class="dropdown-menu" > <li><a id="supervised" href="#">有监督 </a> </li> <li><a id="unsupervised" href="#">无监督 </a> </li> </ul> </li> </ul> </div> </div><!-- end of navbar --> <div class="center"> <form class="form-vertical"> <fieldset> <input id="text_input" type="text" class="input-xxlarge search-query" placeholder="Text input"> </br> <div id="image_upload" class="fileupload fileupload-new text-center" data-provides="fileupload"> <!-- <input type="hidden" value="" name=""> --> <div class="input-append"> <div class="uneditable-input span3"> <i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div> <span class=" btn btn-file"> <span class="fileupload-new">Select file</span> <span class="fileupload-exists">Change</span> <input type="file" /> </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div> </div> <button type="submit" class="btn text-center btn-large btn-success"> Search </button> </br> </fieldset> </form> </div> </div> </body> </html>
BootStrap点击下拉菜单项后显示一个新的输入框实现代码,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- Firefox2中输入框丢失光标bug的解决方法
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- jQuery实现向下滑出的平滑下拉菜单效果
- 点击后慢慢弹出下拉菜单效果代码(栏目管理常用)
- jQuery下拉友情链接美化效果代码分享
- 很可爱的输入框
- js限制输入框可输入字节数代码
- js实现点击向下展开的下拉菜单效果代码
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap框架动态生成Web页面文章内目录的方法
- js下拉菜单中自动信息轮换播放
- js实现简洁大方的二级下拉菜单效果代码
- Bootstrap表单组件教程详解
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- JavaScript动态提示输入框输入字数的方法
- JS组件中bootstrap multiselect两大组件较量