js实现标签选项卡切换效果

本文实例为大家分享了射流研究…实现标签选项卡切换效果展示的具体代码，供大家参考，具体内容如下

超文本标记语言部分

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' link rel='样式表href=' tab。CSS ' script src=' http :选项卡。js '/脚本标题文档/标题/标题dy div id=' tab ' div id=' tab-nav ' class=' tab-nav ' ul Li class=' active ' a href=' # '公告/a/li lia href='# '规则/a/li lia href='# '论坛/a/li lia href='# '安全/a/li lia href='# '公益/a/Li/ul/div div id=' tab-contain ' div class=' mod ' ul lia href=' # '走进无声课堂/a/li lia href='# '淘宝之行大众评审/a/li lia href='# '爱心品牌联合征集/a/li lia href='# '公益机构淘宝攻略/a/Li/ul/div class=' mod ' style=' display : none ' ul lia href=' # '[聚焦]金牌卖家再启航/a/li lia href='#'[功能]橱柜规则升级啦/a/li lia href='#'[话题]又爱又恨优惠券/a/li lia href='#'[工具]购后送店铺红包/a/Li/ul/div class=' mod ' style=' display : none ' ul lia href=' # '张勇：要玩快乐足球/a/li lia href=' '阿里2000万驰援灾区/a/li lia href=' '旅游宝让你边玩/a/li lia href=' '多行跟进阿里信用贷款/a/Li/ul/div class=' mod ' style=' display : none ' ul lia href=' '[通知] "泛滥换新"/a/li lia href=''[通知]"比特币严管"/a/li lia href=''[通知]"禁发商品"/a/li lia href=''[通知]"商品属性"/a/Li/ul/div class=' mod ' style=' display : none ' ul lia href=' # '走进无声课堂/a/li lia href='# '淘宝之行大众评审/a/li lia href='# '爱心品牌联合征集/a/li lia href='# '公益机构淘宝攻略/a/Li/ul/div/div/body/html CSS部分

* { padd :0 pxmargin :0 pxlist-style :无；font-size : 14px} # tab { width:298px高度：120 pxmargin :10 pxborder 33601 px固体# eee飞越：隐藏；}.tab-nav { width :400 px；位置：相对；高度：27 px}.tab-nav ul {位置：绝对；宽度width :301 pxleft :-1px；背景-颜色： # f7f 7；}.tab-nav Li {左浮动：宽度：58 pxpadding: 0 1px高度：36 px背景-颜色： # f7f 7；边框-底部： 1px实心# eee文本对齐：中心；}.标签-导航李。活动{底色： # fff边框-底部-颜色： # fff边框-左侧： 1px实心# eeeborder-right: 1px实心# eeepadding:0px字体粗细：更粗；}li a:link，阿利：访问{ text-decoration : nonecolor: # 000} #制表符-包含mod { margin:25px 6px 10px 6px } #制表符-包含mod ul li{左侧浮动：宽度宽度：143磅重量：25磅飞越：隐藏；}Js部分

函数$(id){ 0返回id==' string '的类型？文件。getelementbyid(id): id；}窗口。onload=function(){ var navs=$(' tab-nav ').getElementsByTagName(' Li ')；var divs=$(“tab-contain”).getElementsByTagName(' div ')；//alert(div s . length)；if(navs.length！=div s . length){ return；} for(var I=0；inavs.lengthi ){ navs[i].标题=我；导航系统onmouseover=function(){ for(var j=0；jnavs.lengthj ){ navs[j].className=div s[j]。风格。显示='无'；} this . NAmE=' active div[this。标题】。风格。display=' block} } }

学习课程链接。

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