我的頁面上有一個下拉菜單,頁面上有一個文本輸入框,一個圖像上傳框,文本輸入框默認是顯示的,而圖片上傳框是隱藏的.
假設(shè)下拉菜單有兩項A和B,我想實現(xiàn)這樣的效果:點擊A時顯示文本輸入框,隱藏圖像輸入框；點擊B時顯示圖像上傳框,隱藏文本輸入框,請問怎么實現(xiàn)?
用firebug調(diào)試的時候發(fā)現(xiàn)只有在加載html頁面的時候幾個click函數(shù)才會執(zhí)行,頁面加載好后點擊下拉菜單項,這些斷點都不會被執(zhí)行,求解是怎么回事.
我的js代碼如下(定義在<head>部分中):
<script type="text/javascript">//image_upload是圖片上傳框的id,最開始時把它隱藏$(document).ready( function(){$("#image_upload").hide();});//text_only是下拉菜單項,我想這個函數(shù)來實現(xiàn)點擊這個菜單項時//顯示文本輸入框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="#" >單模態(tài) <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="#">多模態(tài) <b class="caret"> </b> </a><ul class="dropdown-menu" > <li><a id="supervised" href="#">有監(jiān)督 </a> </li><li><a id="unsupervised" href="#">無監(jiān)督 </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點擊下拉菜單項后顯示一個新的輸入框?qū)崿F(xiàn)代碼，希望對大家有所幫助！
新聞熱點
疑難解答
