专注前端，专注网页设计制作 - (承接网页制作/模板制作/设计) QQ：
分享是不自私的表现：
“扫一扫”
将文章分享到朋友圈。
关注公众号:xue-jiqiao
下一篇：暂无更新
相关导航菜单
发表评论：
导航菜单代码推荐
一定有你需要的
Copyright (C)
All Rights Reserved.当前位置：
简单实现js选项卡切换效果
简单实现js选项卡切换效果
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了简单实现js选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实现思路：
1、首先获取id元素。
2、for循环历遍按钮元素添加onclick事件。
3、排他思想，点击按钮时设置所有选项卡按钮样式为空，利用this关键字指定当前选项卡获得高亮样式。
4、下面的多个div内容块以此类推。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&简单的选项卡切换（仿Hao123导航）&/title&
margin: 0;
padding: 0;
width: 278
margin-top: 100
background-color: #F7F7F8;
.btn button {
color: #616161;
font:14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
height: 34
background-color: #F7F7F8;
.box .btn i {
height: 16
border-left: 1px solid #EAEAEA;
margin-top: 9
_font-size: 0
.box .btn button:hover {
color: #0AA770;
.box .btn s {
text-decoration:
font:14px/34px arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
#box1 #btns .clickbtn {
border-top: 1px solid #0AA770;
color: #0AA770;
width: 278
height: 110
text-align:
font:14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
.bottom a {
text-decoration:
.bottom a:hover {
text-decoration:
window.onload = function(){
var btns = document.getElementById("btns").getElementsByTagName("button");
var divs = document.getElementById("bottomdivs").getElementsByTagName("div");
btns[0].className = "clickbtn";
for(var i = 0;i&btns.i++){
btns[i].index =
btns[i].onclick = function(){
//alert(this.index);
for(var j = 0;j&btns.j++){
btns[j].className = "";
this.className = "clickbtn";
for(var b = 0;b&btns.b++){
divs[b].style.display = "none";
divs[this.index].style.display = "block";
&div class="box" id="box1"&
&div class="btn" id="btns"&
&button&推介&/button&
&button&社会&/button&
&button&娱乐&/button&
&button&军事&/button&
&button&体育&/button&
&div id="bottomdivs"&
&div class="bottom" style="display: block"&
&img src="images/01.jpg" alt=""&
&h4&&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" &小伙直播时遭遇“闹鬼”事件 全过程被拍下&/a&&/h4&
&div class="bottom"&
&img src="images/02.jpg" alt=""&
&h4&&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" &男子穿新郎装背充气娃娃游街&/a&&/h4&
&div class="bottom"&
&img src="images/03.jpg" alt=""&
&h4&&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" &她满足所有人对才女的幻想&/a&&/h4&
&div class="bottom"&
&img src="images/04.jpg" alt=""&
&h4&&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" &王毅回应中美是否会在南海发生冲突&/a&&/h4&
&div class="bottom"&
&img src="images/05.jpg" alt=""&
&h4&&a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" &刘翔与娇妻秀恩爱 豪车曝光车牌太抢眼&/a&&/h4&
与本文相关文章最终效果图（鼠标无操作会自动切换选项卡）：
1 &!DOCTYPE html&
4 &meta charset="gb2312" /&
5 &title&无标题文档&/title&
7 body, ul, li {
font-family:"黑体";
padding:0;
12 ul, li {
list-style:none;
width:408px;
margin:200px auto auto auto;
19 .hide {
display:none;
22 #tab_head {
height:31px;
border-top:2px solid #03F;
border-bottom:1px solid #090;
27 #tab_head li {
float:left;
width:100px;
height:30px;
line-height:30px;
margin:0 0px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
39 #tab_head .current {
position:relative;
height:31px;
margin-bottom:-1px;
background:#fff;
45 #tab_body {
border:1px solid #ccc;
border-top:none;
padding:20px;
height:150px;
text-indent:2em;
52 &/style&
53 &script&
54 window.onload = function(){
var tab_head = document.getElementById("tab_head");
var tab_head_li = tab_head.getElementsByTagName("li");
var tab_body = document.getElementById("tab_body");
var tab_body_div = tab_body.getElementsByTagName("div");
var len = tab_head_li.
var i=<span style="background-color: #f5f5f5; color: #;
var timer = null;
var num=<span style="background-color: #f5f5f5; color: #;
//<span style="background-color: #f5f5f5; color: #.进行初始化设置，设置每个导航的onmouseover和onmouseout的事件
for(i=<span style="background-color: #f5f5f5; color: #; i& i++){
tab_head_li[i].index =
tab_head_li[i].onmouseover = function(){
clearInterval(timer);
num = this.
tab_bodychange();
tab_head_li[i].onmouseout = function(){ autoplay(); }
//辅助函数，将num当前置为显示
function tab_bodychange(){
for(i=<span style="background-color: #f5f5f5; color: #; i& i++){
tab_head_li[i].className = '';
tab_body_div[i].className = 'hide';
tab_head_li[num].className = 'current';
tab_body_div[num].className = '';
//辅助函数，自动循环改变
function autoplay(){
timer = setInterval(function(){num=(++num)%tab_bodychange();},<span style="background-color: #f5f5f5; color: #0);
autoplay();//<span style="background-color: #f5f5f5; color: #.进入自动循环
90 &/script&
91 &/head&
93 &div class="tab"&
&ul id="tab_head"&
&li class="current"&HOME&/li&
&li&VIDEO&/li&
&li&IMAGE&/li&
&li&MUSIC&/li&
<span style="color: #0
&div id="tab_body"&
<span style="color: #1
&div&HOME 标签&/div&
<span style="color: #2
&div class="hide"&VIDEO 标签&/div&
<span style="color: #3
&div class="hide"&IMAGE 标签&/div&
<span style="color: #4
&div class="hide"&MUSIC 标签&/div&
<span style="color: #5
<span style="color: #6 &/div&
<span style="color: #7 &/body&
<span style="color: #8 &/html&
阅读(...) 评论()&!DOCTYPE html&&html&&head&&meta charset=&gb2312& /&&title&无标题文档&/title&&style&body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}ul,li{list-style:none;}.wrap{width:500px; margin:20px auto;}.hide{display:none;}#tab_t{height:25px;border-bottom:1px solid #ccc;}#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}&/style&&script&window.onload = function(){
tab(&tab_t&,&li&,&tab_c&,&div&,&onmouseover&)
function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
var tab_t = document.getElementById(tab_t);
var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
var tab_c = document.getElementById(tab_c);
var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
var len = tab_t_li.
var timer = null;
var num=0;
for(i=0; i& i&#43;&#43;){
tab_t_li[i].index =
tab_t_li[i][evt] = function(){
clearInterval(timer);
num = this.
tab_change()
tab_t_li[i].onmouseout = function(){
autoplay();
function tab_change(){
for(i=0; i& i&#43;&#43;){
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
tab_t_li[num].className = 'act';
tab_c_li[num].className = '';
function autoplay(){
timer = setInterval(function(){
num&#43;&#43;;
if(num&=len) num=0;
tab_change();
autoplay();
}&/script&&/head&&body&&div class=&wrap&&
&ul id=&tab_t&&
&li class=&act&&选择1&/li&
&li&选择2&/li&
&li&选择3&/li&
&li&选择4&/li&
&div id=&tab_c&&
&div&内容1&/div&
&div class=&hide&&内容2&/div&
&div class=&hide&&内容3&/div&
&div class=&hide&&内容4&/div&
&/div&&/div&
&/body&&/html&
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：52504次
积分：1119
积分：1119
排名：千里之外
原创：42篇
转载：123篇
(1)(7)(3)(12)(11)(14)(18)(31)(30)(43)