基于JavaScript实现TAB标签效果_javascript技巧

 js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下

废话不多说了,直接给大家贴代码了:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,TAB标签,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为不规则TAB选项卡效果,属于站长常用代码,更多TAB标签代码请访问频道。" />
<title>TAB选项卡效果</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
//定义三个id
#TabTab03Con1{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabTab03Con2{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabTab03Con3{width:346px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
//定义三个标签类,放在标签头位置,以及背景图片的信息;
.xixi1{width:346px;height:27px;line-height:27px;background-image:url(images/01.jpg);cursor:pointer;}
.xixi2{width:346px;height:27px;line-height:27px;background-image:url(images/02.jpg);cursor:pointer;}
.xixi3{width:346px;height:27px;line-height:27px;background-image:url(images/03.jpg);cursor:pointer;}
//三个标签类用于初始化标签大小位置等信息;
.tab1{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;}
.tab2{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
.tab3{width:115px;height:27px;line-height:27px;float:left;text-align:center;cursor:pointer;color:#FFFFFF;}
-->
</style>
</head>
<body style="text-align:center">
<script type=text/javascript>
function setTab03Syn ( i )
{
selectTab03Syn(i);
}
//设置在不同的标签上点击时,当前标签以及其他标签的状态;
function selectTab03Syn ( i )
{
switch(i){
case 1:
document.getElementById("TabTab03Con1").style.display="block";
document.getElementById("TabTab03Con2").style.display="none";
document.getElementById("TabTab03Con3").style.display="none";
document.getElementById("font1").style.color="#000000";
document.getElementById("font2").style.color="#ffffff";
document.getElementById("font3").style.color="#ffffff";
break;
case 2:
document.getElementById("TabTab03Con1").style.display="none";
document.getElementById("TabTab03Con2").style.display="block";
document.getElementById("TabTab03Con3").style.display="none";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#000000";
document.getElementById("font3").style.color="#ffffff";
break;
case 3:
document.getElementById("TabTab03Con1").style.display="none";
document.getElementById("TabTab03Con2").style.display="none";
document.getElementById("TabTab03Con3").style.display="block";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#ffffff";
document.getElementById("font3").style.color="#000000";
break;
}
}
</script>
<div class="tab">
<div id="bg" class="xixi1">
<div id="font1" class="tab1" onMouseDown="setTab03Syn(1);document.getElementById('bg').className='xixi1'">page1</div>
<div id="font2" class="tab2" onMouseDown="setTab03Syn(2);document.getElementById('bg').className='xixi2'">page2</div>
<div id="font3" class="tab3" onMouseDown="setTab03Syn(3);document.getElementById('bg').className='xixi3'">page3</div>
</div>
<div id=TabTab03Con1> 不规则TAB选项卡效果1</div>
<div id=TabTab03Con2 style="display:none">不规则TAB选项卡效果2</div>
<div id=TabTab03Con3 style="display:none">不规则TAB选项卡效果3</div>
</div>
</body>
</html>

以上代码经小编测试过了,可以放心使用,当然要根据个人项目需求,适当的增删改查,非常感谢大家对网站的支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js_tab标签
js实现tab标签
css实现tab标签切换、tab标签切换 用js实现、hover实现tab标签切换、tab标签怎么实现、javascript tab 切换,以便于您获取更多的相关知识。

时间: 2016-01-12

基于JavaScript实现TAB标签效果_javascript技巧的相关文章

基于javascript实现窗口抖动效果_javascript技巧

本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 鼠标点击,窗口实现抖动. 具体代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"/> <title>窗口登陆效果</title> <style type="text/css"> #win { position:r

基于javascript实现tab切换特效_javascript技巧

本文实例为大家分享了javascript实现tab切换特效代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px;

基于javascript实现图片切换效果_javascript技巧

本文实例为大家分享了js实现图片切换效果,供大家参考,具体内容如下 用js实现点击按钮,图片切换的效果: <div class="box" id="box"> <div class="img_box" id="img_box"> <img src="../raw/b1.jpg" class="image" > <img src="../

基于javascript实现图片滑动效果_javascript技巧

今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的js代码,逻辑简单,有待改进. ps:前两天写了旋转木马,那个兼容性不好,今天写这个网页的时候,也是按照这个思路,在谷歌浏览器上运行很好,火狐很多功能不能实现,由于wrap--panel使用了绝对定位,就将translate平移改为了left.改动后,各个浏览器运行的效果不错. 具体代码如下 html代码(没写注释) <div class="container">

值得分享的Bootstrap Ace模板实现菜单和Tab页效果_javascript技巧

本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. 一.效果展示 折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了. 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以Tab页的形式打开对应的页面 4.支持菜单折叠 5.打开的菜单过多时自动换行显示,折叠后自适应 二.代码示例 有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备.本文主要使用的它的菜单的效果,下面就来看看Ac

简单纯js实现点击切换TAB标签实例_javascript技巧

一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示  源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

js实现点击切换TAB标签实例_javascript技巧

本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-click-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

javascript实现tab切换特效_javascript技巧

本文为大家分享了javascript实现tab切换特效的方法,具体的实现内容如下,先看一下效果图:   很简单的javascript实现tab切换特效 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Tab</title> <script src="js/jquery-1.11.1.js&

JS+CSS实现滑动切换tab菜单效果_javascript技巧

本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果是个比较流行的网页菜单效果,在网上经常可看到这种菜单的身影.本菜单在火狐.IE8.Chrome下测试通过,代码兼容性还可以,自己用的化再美化一下风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-