js实现Tab选项卡切换效果


Posted in Javascript onJuly 17, 2020

本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下

html部分

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

css部分

*{
 padding:0px;
 margin:0px;
 list-style: none;
 font-size: 14px;
}
#tab{
 width:298px;
 height:120px;
 margin:10px;
 border:1px solid #eee;
 overflow: hidden;
}
.tab-nav{
 width:400px;
 position:relative;
 height:27px;

}
.tab-nav ul{
 position:absolute;
 width:301px;
 left:-1px;
 background-color: #f7f7f7;
}
.tab-nav li{
 float:left;
 width:58px;
 padding: 0 1px;
 height:36px;
 background-color: #f7f7f7;
 border-bottom: 1px solid #eee;
 text-align: center;
}
.tab-nav li.active{
 background-color: #fff;
 border-bottom-color:#fff;
 border-left: 1px solid #eee;
 border-right: 1px solid #eee;
 padding:0px;
 font-weight: bolder;
}
li a:link,li a:visited{
 text-decoration: none;
 color:#000;
}
#tab-contain .mod{
 margin:25px 6px 10px 6px;
}
#tab-contain .mod ul li{
 float: left;
 width:143px;
 height:25px;
 overflow: hidden;
}

Js部分

function $(id){
 return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
 var navs=$('tab-nav').getElementsByTagName('li');
 var divs=$('tab-contain').getElementsByTagName('div');
 // alert(divs.length);
 if(navs.length!=divs.length){
 return;
 }
 for(var i=0;i<navs.length;i++){
 navs[i].title=i;
 navs[i].onmouseover=function(){
  for(var j=0;j<navs.length;j++){
  navs[j].className="";
  divs[j].style.display="none";

  }
  this.className="active";
  divs[this.title].style.display="block";
 }
 }

}

js实现Tab选项卡切换效果

学习课程链接。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
js数组去重的方法总结
Jan 18 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 #Javascript
js注册时输入合法性验证方法
Oct 21 #Javascript
angular4实现tab栏切换的方法示例
Oct 21 #Javascript
js Dom实现换肤效果
Oct 21 #Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 #Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 #Javascript
vue做网页开场视频的实例代码
Oct 20 #Javascript
You might like
php简单提示框alert封装函数
2010/08/08 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
javascript call方法使用说明
2010/01/11 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
js实现无缝轮播图效果
2020/03/09 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python实现字符串格式化输出的方法详解
2017/09/20 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python 同时读取多个文件的例子
2019/07/16 Python
python验证码图片处理(二值化)
2019/11/01 Python
法定代表人授权委托书范文
2014/08/02 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
客房服务员岗位职责
2015/02/09 职场文书
财务会计求职信范文
2015/03/20 职场文书
基于Python实现股票收益率分析
2022/04/02 Python