表单输入切换类名

最新推荐文章于 2023-03-11 15:01:18 发布

**星光*

最新推荐文章于 2023-03-11 15:01:18 发布

阅读量277

点赞数 1

本文链接：https://blog.csdn.net/weixin_42322206/article/details/84780154

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input{
				width: 200px;
				height: 30px;
				display: inline-block;
				margin: 20px;
				
				
			}
			div{
				width: 300px;
				height: 300px;
				background: pink;
				text-align: center;
				line-height: 300px;
			}
			.current{
			  background: pink;
			}
			.hide{
				display: none;
				background: red;
			}
		</style>
		<script type="text/javascript" src="jquery-1.12.4.min.js">
			
		</script>
	</head>
	<body>
		<input type="button"  class="current" value="btn1"/>
		<input type="button" value="btn2"/ >
		<input type="button" value="btn3" />
		<input type="text" name="" id="" value=""   placeholder="默认值" />
		<div class="hide">n</div> 
		<div class="hide">m</div>
		<div>r</div>
		个人描述:<textarea >多少人输入</textarea>
	</body>
	<script type="text/javascript">
		var n=null
		var m=null
		var r=null
		$('input').click(function(){
			
			$(this).addClass('current').siblings().removeClass('current')
//			$(this).addClass('current')
//			$('current').siblings().css({'background':'#ccc'})
//			$(this).removeClass('current')
//			n = setTimeout(function(){
//				n++
//				alert(n)
//			},1000)
			$('div').eq($(this).index()).removeClass('hide').siblings('div').addClass('hide')
		
		})
		
		</script>
</html>