tab切换非常常见，应用非常广泛，比较实用，一般来说是一个网站必不可少的一个效果。例如：https://123.sogou.com/中的一个tab部分：

1、案例源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style>
*{margin: 0;padding: 0}
aside{width:260px;height: 315px;border: 1px solid #c3ccd6;overflow: hidden;margin-top: 50px;}
ul{list-style-type: none;margin: 5px 5px 0 5px;width: 250px;height:30px;}
ul li a{float: left;width: 50px;height: 30px;line-height:30px;text-align: center;display: block;
text-decoration: none;font-size: 14px;color:#666; border-bottom: 2px solid white;}
ul li a:hover{font-weight:bold;color:#227fc6;border-bottom: 2px solid #227fc6 ;}
aside hr{width: 250px;margin: 0 auto;background-color:#ecf3f9;opacity: 0.5;}
aside .bottom section{margin: 5px auto;width: 250px;height: 115px;}
aside .bottom section img{width: 250px;height: 115px;}
aside .bottom ul li a{width: 250px;border: none;}
aside .bottom ul li a:hover{font-size: 14px;font-weight: normal;text-decoration: underline;} aside ul li .first{font-weight:bold;color:#227fc6;border-bottom: 2px solid #227fc6 ;}
</style>
</head>
<body>
<aside>
<ul>
<li onmouseover="tab('tab1')"><a href="#">头条</a></li>
<li onmouseover="tab('tab2')"><a href="#">军事</a></li>
<li onmouseover="tab('tab3')"><a href="#">社会</a></li>
<li onmouseover="tab('tab4')"><a href="#">明星</a></li>
<li onmouseover="tab('tab5')"><a href="#">情感</a></li>
</ul>
<hr>
<div class="bottom" id="tab1">
<section>
<img src="data:images/2017-08-23_215120.png"/>
</section>
<ul>
<li class="first"><a href="#">直击:台风"天鸽"来袭人像纸片一样飞</a></li>
<li><a href="#">章莹颖家属:叶落归根找不到她不回国</a></li>
<li><a href="#">艳遇?协警执法遭过路女子搂脖强吻&nbsp;</a></li>
<li><a href="#">10岁女童多次遭"叔叔"强奸 产下女婴</a></li>
<li><a href="#">男子因心情不好 头戴女士内裤行窃&nbsp;</a></li>
</ul>
</div>
<div class="bottom" id="tab2">
<section>
<img src="data:images/2017-08-23_214539.png"/>
</section>
<ul>
<li><a href="#">军报发文:敌人盲目自信或致不战自败</a></li>
<li><a href="#">南亚盟友向北京发密电:印已进伏击圈</a></li>
<li><a href="#">种因得果!&nbsp;撞船的美舰全都来过南海</a></li>
<li><a href="#">北京砍新加坡第二刀 李显龙彻底傻眼</a></li>
<li><a href="#">华人归国感叹:中国跟俄罗斯差距太大</a></li>
</ul>
</div>
<div class="bottom" id="tab3">
<section>
<img src="data:images/2017-08-23_214615.png"/>
</section>
<ul>
<li><a href="#">派出所长遭围殴 混乱中发生枪支走火</a></li>
<li><a href="#">警察出警身中数刀:先不要告诉我父母</a></li>
<li><a href="#">大学生带5枚手雷上火车&nbsp;吓坏安检员</a></li>
<li><a href="#">无人机与客机擦肩而过 13趟航班停飞</a></li>
<li><a href="#">小伙救起溺水母子 自己体力不支遇难</a></li>
</ul>
</div>
<div class="bottom" id="tab4">
<section>
<img src="data:images/2017-08-23_214642.png"/>
</section>
<ul>
<li><a href="#">李枫:为保护他人必须曝光郭敬明性侵</a></li>
<li><a href="#">张歆艺为袁弘庆生晒牵手照 两人甜齁</a></li>
<li><a href="#">蔡依林着鱼尾裤大步擦地 微露事业线</a></li>
<li><a href="#">尺度大解放 陈乔恩真空上阵秀豪乳&nbsp;</a></li>
<li><a href="#">张馨予微博疑似暗讽杨幂 遭网友怒怼</a></li>
</ul>
</div>
<div class="bottom" id="tab5">
<section>
<img src="data:images/2017-08-23_214658.png"/>
</section>
<ul>
<li><a href="#">大妈网恋被骗60多万"爱人"竟是女婿</a></li>
<li><a href="#">男子杀友:他咋知道我女友比他老婆轻</a></li>
<li><a href="#">他接受不了我不堪的过往 我该怎么办</a></li>
<li><a href="#">凑合过的夫妻 最后都成了这三个样子</a></li>
<li><a href="#">只求同日死?男子卧轨自杀拉妻子陪葬</a></li>
</ul>
</div>
</aside>
<script>
function tab(temp_tab) {
var tabs=["tab1","tab2","tab3","tab4","tab5"];
for(i=0;i<5;i++){
if(tabs[i]==temp_tab){
document.getElementById(tabs[i]).style.display="block";
}else{
document.getElementById(tabs[i]).style.display="none";
}
}
}
</script>
</body>
</html>

2、案例实现效果

案例未给出示例(搜狗tab)完整的细节实现，读者可根据示例，自行实现其细节部分。

案例源码文件：tab切换.zip

转载本文请注明出处，谢谢合作！

原生JS实现tab切换--web前端开发的更多相关文章

  1. 指尖下的js ——多触式web前端开发之一：对于Touch的处理

    指尖下的js ——多触式web前端开发之一:对于Touch的处理 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使 ...

  2. 原生js实现tab切换

    //通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...

  3. 指尖下的js —— 多触式web前端开发之三：处理复杂手势(转)

    这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异).这个事件是对touch event的更高层的封装,和touch一样,它同样包括gestu ...

  4. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  5. 【转】 web前端开发分享-目录

    http://www.cnblogs.com/jikey/p/3613082.html 1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发 ...

  6. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  7. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  8. 【转载】WEB前端开发规范文档

    本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...

  9. WEB前端开发规范

    WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...

随机推荐

  1. 二维码开源库ZBar-windows下编译和使用

    源码 下载最新Zbar源码(http://zbar.sourceforge.net/),网站的WIKI是空白的,所以只能在源码包里找使用说明了,很遗憾Windows下怎么编译没说明,只是说明了Wind ...

  2. iOS UIFont 字体名字大全

    Font Family: American TypewriterFont: AmericanTypewriterFont: AmericanTypewriter-Bold Font Family: A ...

  3. 在linux内核中修改TCP MSS值

    MTU: Maxitum Transmission Unit 最大传输单元 MSS: Maxitum Segment Size 最大分段大小 MSS最大传输大小的缩写,是TCP协议里面的一个概念.MS ...

  4. 原生ajax写的上拉加载

    上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用 Javascript: ...

  5. web端表格测试用例

    表格测试: 表格内容列表排序功能是否正常每一栏的宽度是否足够宽,表格里的文字是否都有折行?是否有因为某一格的内容太多,而将整行的内容拉长?表格是否能左(右)添加(删除)列,表格是否能上(下)添加(删除 ...

  6. 一个简单的定时表达式(HH:mm:ss)解析

    前言 为客户开发了一个日志监控程序,监听各频道是否正常工作.其中有一个功能是这样的,当所有频道正常运行一段时间后,语音提示值班人员系统运行正常.一开始,想法比较简单,设置了一个变量,在线程不断轮询的过 ...

  7. Egret学习笔记 (Egret打飞机-4.添加主角飞机和实现飞行效果)

    今天继续写点击了开始之后,添加一个飞机到场景中,然后这个飞机的尾巴还在冒火的那种感觉 先拆解一下步骤 1.首先完成飞机容器的图片加载 2.然后把容器添加到场景中 3.然后实现动画 -首先,我们新建一个 ...

  8. nodejs爬虫初试---superagent和cheerio

    前言 早就听过爬虫,这几天开始学习nodejs,写了个爬虫 demo ,爬取 博客园首页的文章标题.用户名.阅读数.推荐数和用户头像,现做个小总结. 使用到这几个点: 1.node的核心模块-- 文件 ...

  9. keepalived双机热备nginx

    nginx目前是我最常用的反向代理服务,线上环境为了能更好的应对突发情况,一般会使用keepalived双机热备nginx或者使用docker跑nginx集群,keepalived是比较传统的方式,虽 ...

  10. Ubuntu上搭建Hadoop环境（单机模式+伪分布模式）

    首先要了解一下Hadoop的运行模式: 单机模式(standalone)        单机模式是Hadoop的默认模式.当首次解压Hadoop的源码包时,Hadoop无法了解硬件安装环境,便保守地选 ...