前段时间因为需要在网上查了很多关于局部跳转功能的方法,没有用到太多框架,都是比较基础简单的方法,能出效果。
可以配合不同的按钮特效来完成不同的跳转效果。
第一种:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
<div id="tab_t">
<ul>
<li><input type="radio" class="act">自动配置</li>
<li><input type="radio">手动配置</li>
</ul>
</div>
<div id="tab_c">
<div>
<input type="text" placeholder="DNS1" class="net_text" disabled style="font-size: 19px;width: 300px;height: 40px"> 必填<br>
<input type="text" placeholder="DNS2" class="net_text" disabled style="font-size: 19px;width: 300px;height: 40px;margin-top: 10px"></div>
<div class="hide" ><input type="text" placeholder="DNS1" class="net_text" style="font-size: 19px;width: 300px;height: 40px"> 必填<br>
<input type="text" placeholder="DNS2" class="net_text" style="font-size: 19px;width: 300px;height: 40px;margin-top: 10px"></div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var tab_t=document.getElementById('tab_t');
var tab_t_li=tab_t.getElementsByTagName('li');
var tab_c=document.getElementById('tab_c');
var tab_c_li=tab_c.getElementsByTagName('div');
var len=tab_t_li.length;
var i=0;
for(i=0;i<len;i++){
tab_t_li[i].index=i;
tab_t_li[i].onclick=function(){
for(i=0;i<len;i++){
tab_t_li[i].className='';
tab_c_li[i].className='hide';
}
tab_t_li[this.index].className='act';
tab_c_li[this.index].className='';
}
}
}
</script>
</html>
打开显示样式,有点不对称,但不是我项目里需求的样式,所以没有改
输入框可以输入和输入框不能输入的差别
第二种:
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li ><a href="#" type="radio" name="sex" id="button1" onclick="show1()"> A</a></li>
<li><a href="#" type="radio" name="sex" id="button2" onclick="show2()" >B</a></li>
</ul>
<div id="div1">
<span>
<div class="begin act">
192.168.10.
<input type="text" value=" 100" class="begin_ip">