我的頁面上有一個下拉菜單,頁面上有一個文本輸入框,一個圖像上傳框,文本輸入框默認是顯示的,而圖片上傳框是隱藏的.
假設下拉菜單有兩項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><!-- end of navbar --><div><form><fieldset><input id="text_input" type="text" placeholder="Text input"></br><div id="image_upload" data-provides="fileupload"><!-- <input type="hidden" value="" name=""> --><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點擊下拉菜單項後顯示一個新的輸入框實現代碼，希望對大家有所幫助！