不要跳转或刷新 实现网页区域选择显示

宁菜菜吖

宁菜菜吖

2016-02-19 19:14

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享不要跳转或刷新 实现网页区域选择显示,希望可以对大家能有小小的帮助。

    我们在制作网页时,有时会遇到这样的情况:根据用户的选择,显示不同的内容。比如,制作一个登录网页,上面有两个表格,一个给新用户注册用,一个供老用户登录用。我们想在页面上放两个radiobutton,根据用户的选择,来显示格或登录表格。这些操作是在同一个页面中完成的,不需要跳转到其它页面或刷新当前页面。下面我们就来讲述如何实现这样的功能。
 
  打开,添加两个radiobutton,名称分别为radiobutton1和radiobutton2。radiobutton1供新用户注册点击,radiobutton2供老用户登录点击。再添加一个表格,用来显示新用户的注册登记区域。在表格中插入需要的相关元素、文字;再插入一个表格,用来显示老用户登录区域,同样在表格内插入相关内容。这样,我们就简单地设计好了界面。

  接着,我们就开始编辑相关的代码。选中第一个表格,在HTML编辑窗口中对其进行修改,在表格

  〈table id="newuser" style="display:none" border="0" cellspacing="0" cellpadding="0">

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  同样的方法对第二个表格进行修改,ID值为“olduser”。这是我们按下F12预览,在浏览器中看到的只是两个radiobutton,表格是不可视的。

  完成以上编辑后,开始编写radiobutton的代码。选中radiobutton1为其添加一个onclick的事件响应,代码如下:

  〈input type="radio" name="radiobutton" value="radiobutton"onclick="newuser.style.display='';olduser.style.display='none'">

  代码含义是点击radiobutton1时,设置表格newuser的display属性为空,即可视,表格olduserdisplay属性为none不可视。

  同样编辑radiobutton2代码,它的onclick事件响应和radiobutton1恰恰相反,代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  〈input type="radio" name="radiobutton" value="radiobutton" onclick="olduser.style.display='';newuser.style.display='none'">。

  完成以上步骤后,就搞定了这个页面的制作。F12预览,浏览器中,我们点击radiobutton1就会显示新用户注册界面;再点击radiobutton新用户注册界面不可视,老用户登录界面显示。

  通过很简单的代码编辑,就可以实现这个非常实用的功能。虽然我们用层也可以实现这样的效果,但是层在网页中精确定位远没有表格方便,不便于网页的整体布局设计。

    我们在制作网页时,有时会遇到这样的情况:根据用户的选择,显示不同的内容。比如,制作一个登录网页,上面有两个表格,一个给新用户注册用,一个供老用户登录用。我们想在页面上放两个radiobutton,根据用户的选择,来显示注册表格或登录表格。这些操作是在同一个页面中完成的,不需要跳转到其它页面或刷新当前页面。下面我们就来讲述如何实现这样的功能。

  打开Dreamweaver,添加两个radiobutton,名称分别为radiobutton1和radiobutton2。radiobutton1供新用户注册点击,radiobutton2供老用户登录点击。再添加一个表格,用来显示新用户的注册登记区域。在表格中插入需要的相关元素、文字;再插入一个表格,用来显示老用户登录区域,同样在表格内插入相关内容。这样,我们就简单地设计好了界面。

  接着,我们就开始编辑相关的代码。选中第一个表格,在HTML编辑窗口中对其进行修改,在表格

  〈table id="newuser" style="display:none" border="0" cellspacing="0" cellpadding="0">

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  同样的方法对第二个表格进行修改,ID值为“olduser”。这是我们按下F12预览,在浏览器中看到的只是两个radiobutton,表格是不可视的。

  完成以上编辑后,开始编写radiobutton的代码。选中radiobutton1为其添加一个onclick的事件响应,代码如下:

  〈input type="radio" name="radiobutton" value="radiobutton"onclick="newuser.style.display='';olduser.style.display='none'">

  代码含义是点击radiobutton1时,设置表格newuser的display属性为空,即可视,表格olduserdisplay属性为none不可视。

  同样编辑radiobutton2代码,它的onclick事件响应和radiobutton1恰恰相反,代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  〈input type="radio" name="radiobutton" value="radiobutton" onclick="olduser.style.display='';newuser.style.display='none'">。

  完成以上步骤后,就搞定了这个页面的制作。F12预览,浏览器中,我们点击radiobutton1就会显示新用户注册界面;再点击radiobutton新用户注册界面不可视,老用户登录界面显示。

  通过很简单的代码编辑,就可以实现这个非常实用的功能。虽然我们用层也可以实现这样的效果,但是层在网页中精确定位远没有表格方便,不便于网页的整体布局设计。

展开更多 50%)
分享

猜你喜欢

不要跳转或刷新 实现网页区域选择显示

Web开发
不要跳转或刷新 实现网页区域选择显示

Dreamweaver8实现网页区域选择显示

Web开发
Dreamweaver8实现网页区域选择显示

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript实现网页跳转的方法

Web开发
javascript实现网页跳转的方法

利用AJAX技术实现网页无刷新进度条显示

Web开发
利用AJAX技术实现网页无刷新进度条显示

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何用AJAX实现网页无刷新功能

Web开发
如何用AJAX实现网页无刷新功能

JSP中实现页面跳转

Java JAVA基础
JSP中实现页面跳转

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

路由器怎么限制网速及其方法

路由器怎么限制网速及其方法

在C++中侦测内嵌型别的存在

在C++中侦测内嵌型别的存在
下拉加载更多内容 ↓