原生js制作簡單的個人設置中心TAB選項卡切換代碼



123 489 164



特效描述:個人設置中心 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

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

湖北30选5开奖结果走势图表