利用jQuery實現手機賬號管理表單代碼



21 83 28



特效描述:利用jQuery實現 手機賬號管理 表單代碼,利用jQuery實現手機賬號管理表單代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script src="js/auto-size.js"></script>
<script src="js/jquery-2.2.4.min.js"></script>

3. HTML代碼

<div class="mobile-wrap center mobile-wrap-mb">
	<header>
		<span class="return">
			返回
		</span>
	</header>
	<main>
		<div class="inform">
			<h3>賬號管理</h3>
			<div class="inform-list">
				<ul>
					<li class="acti">個人信息</li>
					<li>修改資料</li>
					<li>修改密碼</li>
				</ul>
			</div>
			<div class="inform-text show">
				<p>
					<span>
						UID :
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						用戶名
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						電話號
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						微信號
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						商戶級別
					</span>
					<input type="text" />
				</p>
				<h4>
					<input type="submit" name="" id="" value="確定修改" />
					<a href="#">遇到問題?</a>
				</h4>
			</div>
			<div class="inform-text">
				<p>
					<span>
						UID :
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						用戶名
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						電話號
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						微信號
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						商戶級別
					</span>
					<input type="text" />
				</p>
				<h4>
					<input type="submit" name="" id="" value="確定修改" />
					<a href="#">遇到問題?</a>
				</h4>
			</div>
			<div class="inform-text">
				<p>
					<span>
						UID :
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						用戶名
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						電話號
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						微信號
					</span>
					<input type="text" />
				</p>
				<p>
					<span>
						商戶級別
					</span>
					<input type="text" />
				</p>
				<h4>
					<input type="submit" name="" id="" value="確定修改" />
					<a href="#">遇到問題?</a>
				</h4>
			</div>
		</div>
	</main>
</div><!--mobile_wrap-->
<script type="text/javascript">
	$('.inform-list ul li').click(function(){
		var n=$(this).index();
		$(this).addClass('acti').siblings().removeClass('acti');
		$('.inform-text').fadeOut();
		$('.inform-text').eq(n).fadeIn();
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 快乐十分容易出的5个号 魔兽世界幻化 快乐12分开奖结果四川 澳客彩票网网址导航 卖性用品可以赚钱吗 安徽福利彩票中心 长沙麻将258麻将技巧 爱养成2拼图赚钱 足彩进球彩奖金 十一运夺金任五遗漏 竞彩翻倍死了多少人 短期工干什么赚钱 大乐透19098期推荐 福彩3d和值走势图带连线专业版 简单南昌麻将算子表 中国利彩票开奖