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. [Python爬虫] Selenium爬取新浪微博客户端用户信息、热点话题及评论 (上)

    转载自:http://blog.csdn.net/eastmount/article/details/51231852 一. 文章介绍 源码下载地址:http://download.csdn.net/ ...

  2. Windows Server 2016-Active Directory域服务概述

    活动目录(AD)是一种目录服务是微软用于开发Windows域网络.它被包含在大多数Windows Server 操作系统中作为一组进程和服务.最初,Active Directory只负责集中式域管理. ...

  3. php扩展开发实战教程(1)

    我的开发环境: Ubuntu16.04 apt方式安装的php5.6, apache,mysql等 由于我的本机用的是apt方式安装的php,所以我这里从头开始用最精简的方式,编译安装一个php5.4 ...

  4. install atom markdown preview plus error

    Installing "markdown-preview-enhanced@0.15.2" failed.Hide output- npm ERR! Darwin 17.2.0 n ...

  5. 关于Git的版本问题

    问题的起源 我在IDEA上不小心修改了文件(加了一行空行)并且被保存了,在GitHub Desktop桌面工具上可以看到changes中有修改记录,并且使用命令行git status也可以看到文件的修 ...

  6. [Uva10294]Arif in Dhaka

    [Uva10294]Arif in Dhaka 标签: 置换 Burnside引理 题目链接 题意 有很多个珠子穿成环形首饰,手镯可以翻转和旋转,项链只能旋转.(翻转过的手镯相同,而项链不同) 有n个 ...

  7. 前端开发利器webStorm

    这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...

  8. 【学习笔记】Spring中的BeanFactory和ApplicationContext 以及 Bean的生命周期（Y2-3-2）

    BeanFactory和ApplicationContext Spring的IoC容器就是一个实现了BeanFactory接口的可实例化类. Spring提供了两种不同的容器: 一种是最基本的Bean ...

  9. 【剑指offer】04替换空格，C++实现

    0.前言 # 替换空格为字符串部分的题目,剑指offer中字符串系列的文章地址,剑指offer全系列文章地址 1.题目 # 请实现一个函数,将一个字符串中的空格替换成"%20".例 ...

  10. 关于 Java 面试，你应该准备这些知识点

    来源:占小狼, www.jianshu.com/p/1b2f63a45476 马老师说过,员工的离职原因很多,只有两点最真实: 钱,没给到位 心,受委屈了 当然,我是想换个平台,换个方向,想清楚为什么 ...