BootStrap点击下拉菜单项后显示一个新的输入框实现代码
作者:ningyuwhut 发布时间:2024-04-16 08:54:39
标签:bootstrap,下拉菜单,输入框
我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的.
假设下拉菜单有两项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点击下拉菜单项后显示一个新的输入框实现代码,希望对大家有所帮助!
0
投稿
猜你喜欢
- 前言众所周知在Python中有专门用于logger打印的套件叫logging,但是该套件logger仅接收一个字符串类型的logger打印信
- 1.GAN简述在GAN中,有两个模型,一个是生成模型,用于生成样本,一个是判别模型,用于判断样本是真还是假。但由于在GAN中,使用的JS散度
- 当前,utf8_unicode_ci校对规则仅部分支持Unicode校对规则算法。一些字符还是不能支持。并且,不能完全支持组合的记号。这主要
- String含义:String是一个封装char[]数组的对象,字符串不可变String str = “abc&
- 引言本文将深入探讨Python语言中的核心概念:类(Class)和对象(Object)。我们将介绍这些基本概念,然后通过示例代码详细展示Py
- 如下所示:# coding: utf-8import osimport psutilimport timedef write_pid():
- 在MySQL的管理过程中,会遇到PC Server脱机或者重启,我需要在主机启动后再将MySQL服务启动。如果上百台或者更多的MySQL主机
- loss函数如何接受输入值keras封装的比较厉害,官网给的例子写的云里雾里,在stackoverflow找到了答案You can wrap
- Python列表List(列表) 是 Python 中使用最频繁的数据类型。列表可以完成大多数集合类的数据结构实现。它支持字符,数字,字符串
- 前言:在转换操作中,我们执行各种操作,例如更改系列的数据类型,将系列更改为列表等。为了执行转换操作,我们有各种有助于转换的功能,例如.ast
- 连接查询:是将两个查询(或表)的每一行,以“两两横同对接”的方式,所得到的所有行的结果,即一个表中的某行,跟另一个表中的某行。进行“横向对接
- 以前写点小程序其实根本不在乎并行,单核跑跑也没什么问题,而且我的电脑也只有双核四个超线程(下面就统称核好了),觉得去折腾并行没啥意义(除非在
- 1.打开 database/migrations/2014_10_12_000000_create_users_table.php 这个 m
- 目标能够使用mybatis的标签实现动态SQL拼接分析我们在前边的学习过程中,使用的SQL语句都非常简单。而在实际业务开发中,我们的SQL语
- 对于一些复杂的hdf5文件,通过可视化的方法可以比较容易的了解文件的内部结构,下面介绍基于python的一个hdf5文件的安装使用方法1 安
- 场景在 Go 语言中,常量分为有类型常量和无类型常量。// 有类型常量const VERSION string = "v1.0.0
- 在使用selenium去获取淘宝商品信息时会遇到登录界面这个登录界面处理的难度在于滑动验证的实现,有的人使用微博登录,避免了滑动验证,那可不
- 本文实例讲述了python图像处理之反色实现方法。分享给大家供大家参考。具体如下:我们先加载一个8位灰度图像每一个像素对应的灰度值从0-25
- 需求来源好友 A:橡皮擦,可否提供网页,上传带人像的图片,然后可以直接抠图,最好直接生成 PNG 图片下载。 橡皮擦:每天需要调用多少次?
- Microsoft Visual C++ 14.0 is required. Get it with “Microsof