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. .net下使用socket.io随笔记录

    一.问题背景 目前公司在互联网产品上需要程序与前端部分要进行一个实时交互,在进行一定程度上的选型后,决定使用socket.io框架进行一个实践,算是公司的一个新的 尝试,也算是给自己增加增长见闻,由于 ...

  2. 小甲鱼OD学习第11讲

    这次我们的任务是破解这个需要注册的软件,如下图所示 我们这次从字符串入手,我们查找 unregistered  字符串 然后我们在如下图的字符串下断点 然后我们来到断点处,我们观察到 地址为 0040 ...

  3. 《CSS核心技术详解》

    前言 看似简单的CSS,却暗藏玄机,那是我们摸爬滚打好长时间后悟出的真理. 在很长的一段时间里,我并没有重视CSS,觉得CSS很简单,无非就是一些属性:后来才发现自己小看了CSS,对CSS的了解实在是 ...

  4. Halcon一日一练：图像分辨率与像素

    1.图像像素: 像素是指由图像的小方格即所谓的像素(pixel)组成的,这些小方块都有一个明确的位置和被分配的色彩数值,而这些一小方格的颜色和位置就决定该图像所呈现出来的样子.像素是构成图像的基本单元 ...

  5. [Python Study Notes]字符串处理技巧(持续更新)

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  6. git服务器配置http请求

    使用apache 配置http协议的git库 在CentOS上基于Apache http服务搭建git远程仓库(一) 基于http方式的git服务器搭建 搭建http协议的git服务器 Linux g ...

  7. python[error] - mysql_config not found

    具体报错信息: root@pts/4 $ pip install MySQL-python Collecting MySQL-python Using cached MySQL-python-1.2. ...

  8. Java经典编程题50道之三十八

    编写一个函数:输入n为偶数时,调用函数求1/2+1/4+...+1/n:当输入n为奇数时,调用函数1/1+1/3+...+1/n. public class Example38 {    public ...

  9. Java中空串和null串的区别

    对于空串来说这是一个对象他被""这个对象给实例化了只是他的长度为0字符的内容为空. 而String变量中还可以存储一个特殊的值,这个是null,这个表示没有和其他的对象与这个变量相 ...

  10. opencv 3.3.0 如何旋转图像？

    函数介绍 1. void cv::flip(InputArray src,OutputArray dst,int flipCode) 2. void cv::transpose(InputArray ...