网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置：
编程学习网
>>
网页制作
>
js教程
> >
[json]js tab选项卡仿网易切换菜单
[json]js tab选项卡仿网易切换菜单
发布时间：2018-01-13
【www.gdgbn.com--js教程】
提示：您可以先修改部分代码再运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++){ if (i == Num){ thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> </head> <body> <!-- 标题开始 --> <ul id="myTab1"> <li class="active" onclick="nTabs(this,0);">找兼职 <li class="normal" onclick="nTabs(this,1);">招兼职 <!-- 内容开始 --> <form method="POST" action="data/post.php" enctype="multipart/form-data" name="myfm"> <p>您的姓名： <input name="name" type="text" class="inp" id="name" /> </p> <p>您的性别： <label> <input name="sex" type="radio" value="1" checked="checked" /> 男</label><label> <input type="radio" name="sex" value="0" /> 女</label> </p> <p>联系电话： <input name="tel" type="text" class="inp" id="tel" /> </p> <p>QQ / MSN： <input name="qq" type="text" class="inp" id="qq" /> </p> <p>联系地址： <input name="address" type="text" class="inp" id="address" /> </p> <p> <label> <select name="city" id="city"> <option value="0">--所在地区--</option> <?=$option;?> </select> </label> <select name="datename" class="inp2" id="date" style="width:90px;"> <option value="0">--有效日期--</option> <option value="3">3天</option> <option value="7">7天</option> <option value="30">一个月</option> <option value="90">三个月</option> </select><input name="hid" type="hidden" value="0" /> </p> <p>信息标题：<input name="title" type="text" class="inp" id="title" /> 比如:兼职教师、兼职设计师...</p> <p><textarea name="content" cols="" rows="" class="inpmai" id="content" >
Ctrl+Enter可直接发表
网站地图