本文实例为大家分享了射流研究…实现鼠标单击标签表单切换展示的具体代码，供大家参考，具体内容如下

代码：

！DOCTYPE html html head meta charset=' utf-8 '/title/title style type=' text/CSS ' * { padd : 0；保证金： 0；border:0}车身{ text-align :居中；} ul { list-style :无；} a { text-decoration : nonecolor : # ff 6666 font-family : Arial；} .选项卡-容器{宽度： 398px高度： 200像素；border:1px #ffcccc固体；margin: 0自动相对位置：飞越：隐藏；}/*制表符开头*/。标签头{宽度： 400 px高度：30 px左转：0背景# ffcccc绝对位置：左侧：-1px；//这里设置-1是为了里的边界与最外层的边界重合} .选项卡-头li { float:left高度： 29px线高： 29px宽度： 78px飞越：隐藏；padd : 0 1 pxborder-bottom : 1 px实心# ffcccc背景技术# ffeeee } li。选择{ background : # fffpadd : 0；边框-左侧： 1px实心# ffccccborder-right: 1px实心# ffccccborder-bottom: 1px实心# fff}/*选项卡-头端选项卡-面板开始*/。选项卡面板{相对位置：宽度： 100%;高度： 85%;前：名15%；-网络套件-transit :全0.01秒线性；//切换过渡效果} .选项卡-面板部分{位置：绝对；显示器：内联块；宽度： 100%;高度： 100%;} # panel-1 { left : 0；} # panel-2 {左侧： 100%；} # panel-3 {左侧： 200%；} # panel-4 {左侧： 300%；} # panel-5 {左侧： 400%；}/style/head body div class=' tab-container ' ul class=' tab-head ' Li id=' 1 ' class=' select ' onmousedown=' $(this)' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' Tab1/a/Li id=' 2 ' onmousedown=' this ' $(this)' a href=' # rel=' external '=' external nofollow ' rel=' external nofollow ' rel='外部否遵循“Tab5/a/Li/ul div id=”选项卡-面板”类别=“选项卡-面板”部分id=“面板-1”p这是面板-1/p/截面截面id='面板-2'p这是面板-2/p/截面截面id='面板-3'p这是面板-3/p/截面截面id='面板-4'p这是面板-4/p/截面截面id='面板-5英尺这是第5小组/p/组/分区/分区脚本类型=' text/JavaScript '函数$(id){ var lis=document。 getelementsbytagname(' Li ')；for(var I=0；一。长度；i ) { lis[i].setAttribute('class '，' ')；};id.setAttribute('class '，' select ')；var ele=文档。getelementbyid(' tab-panel ')；埃勒。风格。左=-(id。id-1)“00%”；}/脚本/正文/html效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。