点击输入框展开tab选项

版权声明:转载请附上链接!谢谢 https://blog.csdn.net/qq_26173219/article/details/79802928

样式什么的没有调,功能可以用,具体自己调

直接复制黏贴,修改jquery,bootstrap的js和css文件位置就能使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
	</head>

	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-5 col-xs-12 col-md-offset-1">
					<div>
						<div class="col-md-4">
							<input class="form-control" type="text" id="zt_country" value="" readonly="readonly">
							<div></div>
						</div>
					</div>
				</div>

				<div class="container-fluid col-md-6 col-xs-12 zt_li" id="zt_countryTabs" tabindex="1" style="width: 550px;display: none; border: solid #C4E2F7 1px; background-color: #FFFFFF;">
					<ul class="nav nav-tabs">
						<li role="presentation" class="active zt_li">
							<a href="#destinationCountryName-dialog-countryTabs-1" data-toggle="tab">1</a>
						</li>
						<li role="presentation" class="zt_li">
							<a href="#destinationCountryName-dialog-countryTabs-2" data-toggle="tab">2</a>
						</li>
						<li role="presentation" class="zt_li">
							<a href="#destinationCountryName-dialog-countryTabs-3" data-toggle="tab">3</a>
						</li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane  active" id="destinationCountryName-dialog-countryTabs-1">
							<div class="col-lg-4 url_div">
								<a class="url-product country layui-btn layui-btn-primary " href="javascript: void(0);" title="标题1" data-code="标题1" style="text-decoration: none; border: 0px">标题1</a>
							</div>

						</div>
						<div class="tab-pane" id="destinationCountryName-dialog-countryTabs-2">
							<div class="col-lg-4 url_div">
								<a class="url-product country layui-btn layui-btn-primary " href="javascript: void(0);" title="标题2" data-code="标题2" style="text-decoration: none; border: 0px">标题2</a>
							</div>

						</div>
						<div class="tab-pane" id="destinationCountryName-dialog-countryTabs-3">
							<div class="col-lg-4 url_div">
								<a class="url-product country layui-btn layui-btn-primary " href="javascript: void(0);" title="标题3" data-code="标题3" style="text-decoration: none; border: 0px">标题3</a>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript">
			//点击弹出div框
			$("#zt_country").focus(function() {
				var div = document.getElementById('zt_countryTabs');
				if(div.style.display == "none") {
					div.style.display = "block";
					div.style.position = "absolute";
					div.style.zIndex = "3",
						div.style.top = document.getElementById('zt_country').style.top + 36 + "px";
					div.style.left = "224px";
				} else {
					div.style.display = "none";
				}
			});

			//当点击a标签以后赋值给input框
			$(".country").click(function() {
				var zt_country = $(this).data('code');
				$("#zt_country").val(zt_country);
				var div = document.getElementById('zt_countryTabs');
				div.style.display = "none";
				$("#zt_country").blur();
				//赋值给全局变量
				consigneeCountry = zt_country;
				//每次选择都清空input的值
				$("#transport").val("");
			});

			//失去焦点时间,隔100毫秒执行,不然失去焦点会把上面的点击事件覆盖掉,导致赋值不上去
			$("#zt_country").blur(function() {
				setTimeout(function() {
					var div = document.getElementById('zt_countryTabs');
					div.style.display = "none";
				}, 100);
			});
			$(".zt_li").mousedown(function(event) {
				event.preventDefault();
			})
		</script>

	</body>

</html>

可以做成的样子

demo的样子:

不要在意这些细节。。。

展开阅读全文

没有更多推荐了,返回首页