<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.slip{display:none}
.active{display:block}
.topItem{float:left; background:url(./images/jrw1_04.gif) no-repeat; width:77px; height:22px;line-height:22px;color:#2f82fb}
.top{height:21px; background-color:#ebf5fa; border:solid 1px #c3e1f0; border-bottom-width:0; padding-left:15px; padding-top:2px}
.top .active{background-image:url(./images/jrw1_03.gif);color:red}
</style>
</head>
<body>
<div style="width:512px; height:400px; font-size:12px;">
<div style="border:1px solid #9cb9e7; text-align:center; padding-bottom:2px;">
<div style="width:507px; padding-top:2px;">
<div class="top">
<div class="topItem active" onmouseover="showNext(0)">资讯</div>
<div class="topItem" onmouseover="showNext(1)">游戏</div>
<div class="topItem" onmouseover="showNext(2)">购物</div>
<div style="clear:both"></div>
</div>
<div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;" class="slip active">
the first 资讯
<div style="clear:both"></div>
</div>
<div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;" class="slip">
中间
<div style="clear:both"></div>
</div>
<div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;" class="slip">
最后
<div style="clear:both"></div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<script type="text/javascript">
function showNext(index){
var slips=getElementsByClassName('slip');
var topItem=getElementsByClassName('topItem');
activeItem(topItem,index);
activeItem(slips,index);
}
function activeItem(elementArray,index){
if(elementArray[index].className.indexOf("active")==-1){
elementArray[index].className+=" active";
}
for(var i=0;i<elementArray.length;i++){
if(i!=index){
removeClassName(elementArray[i],'active')
}
}
}
function removeClassName(element,classname){
var theClassName;
do{
theClassName=element.className;
element.className=theClassName.replace(classname, " ")
}while(theClassName.indexOf(classname)>=0);
}
function getElementsByClassName(className, parentElement){
var elems = (parentElement||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
}
}
return result;
}
</script>
</body>
</html>
分享到：
相关推荐
这个代码是用jQuery实现一个简单的tab切换功能，可以供前端开发者参考
两个简单tab切换 可用 适合新手学习
EasyIndicator一款简易tab 切换指示器，带平移动画效果，可适用于ViewPage或普通View下
Asp.net2.0实现简易菜单Tab切换
[QT]实现Tab键切换控件的两种方式及禁止Tab切换的简单方法，详细信息内容见博客：https://blog.csdn.net/humanking7/article/details/80697667
tab切换一个简单的小功能,在pc端还是在移动端总是可以预见使用的情况,下面总结一下tab切换的实现。tab切换简单来讲就是某一个标题下对应某一块内...
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
简单JavaScript Tab切换源码下载。兼容IE8以及各种主流浏览器
超级好用的TAB切换代码，你只需要替换其中的几个网址和名称就可以了，就像使用傻瓜相机一样简单，太容易了
JavaScript实现简易tab栏切换案例 本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码，供大家参考，具体内容如下 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想： 1）、所有元素全部清除...
非常简单的tab切换，小白也能看得懂,非常精简的!
本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net tab切换</title&...
代码很简单,只要认真看就会看得懂的.这个效果没有那么好看,但是主要还是看其中的代码的思想和方法!
android viewpager实现微信tab简单切换
用jQuery实现的简单tab标签切换效果，十分简单，每个人都能看懂。
实用的TAB切换效果，js切换，应用广泛，简单易懂，方便快捷
JS实现Tab切换，超简单只有几行代码，点击按钮，在同一页面的不同内容切换
四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示…… 那么，整体思路很简单，给四个标题绑定事件，...
非常简单的实现tab切换，使用Jquery实现的
仿时刻事件TAB切换，兼容主流浏览器，简单实用。