你的位置:首页 > 软件开发 > Java > javascript面向对象系列第四篇——选项卡的实现

javascript面向对象系列第四篇——选项卡的实现

发布时间:2016-08-14 18:00:03
前面的话  面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它。本文将用面向对象的技术来制作一个简单的选项卡 图示说明   由图示结果看到,这是一个非常简单的选项卡。三个控制按钮利用点击事件分别控制三张不同的选项卡。选项卡用文字和背 ...

前面的话

  面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它。本文将用面向对象的技术来制作一个简单的选项卡

 

图示说明

   由图示结果看到,这是一个非常简单的选项卡。三个控制按钮利用点击事件分别控制三张不同的选项卡。选项卡用文字和背景颜**分,控制按钮用轮廓outline区分

 

HTML代码

  【1】使用行间样式来引入CSS的扩展性不高,需要根据实际情况谨慎使用

  【2】在a标签中使用javascript:;来阻止默认的页面跳转行为

  【3】给最外层div元素设置id属性便于外层元素获取,为选项卡和控制按钮使用不同的标签ul和nav,便于内层元素获取

<div id="box">  <ul >    <li >第一张选项卡</li>    <li >第二张选项卡</li>    <li >第三张选项卡</li>  </ul>  <nav >    <a href="javascript:;">第一个控制按钮</a>    <a href="javascript:;">第二个控制按钮</a>    <a href="javascript:;">第三个控制按钮</a>  </nav>  </div>

原标题:javascript面向对象系列第四篇——选项卡的实现

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。