原生js制作简单的个人设置中心TAB选项卡切换代码



119 474 159



特效描述:个人设置中心 TAB选项卡 选项卡切换,一个简单清新的选项卡。

代码结构

1. 引入CSS

<link href="css.css" rel="stylesheet" type="text/css" />

2. HTML代码

<div id="content">
<div class="tab1" id="tab1">
	<div class="menu">
		<ul>
			<li id="one1" onclick="setTab('one',1)">资料更改</li>
			<li id="one2" onclick="setTab('one',2)">密码更改</li>
			<li id="one3" onclick="setTab('one',3)">头像更改</li><li id="one4" onclick="setTab('one',4)">收货地址管理</li>
		</ul>
	</div>
	<div class="menudiv">
		<div id="con_one_1">
        <div id="1">    <table width="500" border="0" cellpadding="0" cellspacing="0" align="center" >
	  <tr>
		<td width="142" align="right">用户名:</td>
		<td width="352"><input type="text" style="width:200;height:40" value="" size="30" /></td>
	  </tr>
		<td height="30" align="right">手机:</td>
		<td><input type="text" size="30" /></td>
	  </tr>
      		<td height="30" align="right">性别:</td>
		<td>
		  <form id="form1" name="form1" method="post" action="">
		    <p>
		      <label>
		        <input type="radio" name="RadioGroup1" value="男" id="RadioGroup1_0" />
		        男</label>
		      <label>
		        <input type="radio" name="RadioGroup1" value="女" id="RadioGroup1_1" />
		        女</label>
		      <label>
		        <input type="radio" name="RadioGroup1" value="保密" id="RadioGroup1_2" />
		        保密</label>
		      <br />
		      </p>
		    </form></td>
	  </tr>
	  <tr>
		  </tr>
		  <td height="28" align="right">所在地:</td>
		<td><form id="form1">
				<select id="selProvince" onChange = "getCity(this.options[this.selectedIndex].value)">
					<option value="">-请选择-</option>
					<option value="北京市">北京市</option>
					<option value="上海市">上海市</option>
					<option value="天津市">天津市</option>
					<option value="重庆市">重庆市</option>
					<option value="河北省">河北省</option>
					<option value="内蒙古">内蒙古</option>
					<option value="吉林省">吉林省</option>
					<option value="辽宁省">辽宁省</option>
					<option value="黑龙江">黑龙江</option>
					<option value="江苏省">江苏省</option>
					<option value="浙江省">浙江省</option>
					<option value="安徽省">安徽省</option>
					<option value="福建省">福建省</option>
					<option value="江西省">江西省</option>
					<option value="山东省">山东省</option>
					<option value="河南省">河南省</option>
					<option value="湖北省">湖北省</option>
					<option value="湖南省">湖南省</option>
					<option value="广东省">广东省</option>
					<option value="广西省">广西省</option>
					<option value="海南省">海南省</option>
					<option value="四川省">四川省</option>
					<option value="贵州省">贵州省</option>
					<option value="陕西省">陕西省</option>
					<option value="甘肃省">甘肃省</option>
					<option value="云南省">云南省</option>
					<option value="其它">其它</option>
				</select>
				<select id="selCity">
					<option>-城市-</option>
				</select>
			</form>		</td>
	  </tr>	
      	    <td height="30" align="right">个人说明:</td><td><input name="" type="text" id="test1" /></td>
	  </tr>
      	  </tr>	
	  </tr>
	  </tr></table></div>
        <div id="bc01"></div>
      </div>
		<div id="con_one_2" style="display:none;">
               <div id="1">    <table width="500" border="0" cellpadding="0" cellspacing="0" align="center" >
	  <tr>
		<td width="142" align="right">初始密码:</td>
		<td width="352"><input type="text" style="width:200;height:40" value="" size="30" /></td>
	  </tr>
      		<td height="30" align="right">新密码:</td>
		<td><input type="text" size="30" /></td>
	  </tr>
      		<td height="30" align="right">确认密码:</td>
		<td><input type="text" size="30" /></td>
	  </tr>
      </table></div>
               <div id="bc01"></div>
      </div> 
		<div id="con_one_3" style="display:none;">
        <div id="txgg">
        <div id="tx01"></div>
        <div id="wzms"><span>从电脑中选择你喜欢的图片</span>   <br>  JPG、JPEG、GIF、或PNG等文件.<div id="tpsc"></div></div>
        </div>
        </div>
		<div id="con_one_4" style="display:none;">tab标签</div>
	</div>
</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 选项卡自动切换 登录框 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到