JS实现TAB标签效果

最新推荐文章于 2022-05-28 11:53:17 发布
最新推荐文章于 2022-05-28 11:53:17 发布
阅读量2.8k 收藏
点赞数
分类专栏： 工作 文章标签： 标签 url javascript js function

<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标签代码请访问懒人图库JS代码频道。" />
<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>

 

zurich1979
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js Tab标签页
04-26
js Tab标签页
js实现tab标签
thewebcode
06-15 111
&lt;html&gt; &lt;head&gt; &lt;title&gt;tab标签&lt;/title&gt; &lt;/head&gt; &lt;style type='text/css'&gt; *{ margin:0; padding:0; background-color:#ccc; } #main{ margin:30px auto; width:...
JavaScript之Tab标签（原始版）
weixin_30319097的博客
10-28 84
最原始的Tab标签页，只需再添加CSS样式即可，重点在于Tab标签底部边框样式的处理。待完善：代码的封装与复用。 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div.tab div{ ...
原生JS实现TAB栏切换
alokka的博客
06-30 9637
之前上传了一个jquery实现tab栏切换的博客，这个是原生js实现tab栏切换的案例，不多说直接上代码！同样复制粘贴就能看到效果哦！ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .Box{ width: 2
【Jquery经典特效6】js实现tab标签切换效果
04-22
【Jquery经典特效6】js实现tab标签切换效果
【Javascript】【jQuery】使用jQueryUI实现标签页（TabPage）
天天向上 Up Up Up (*^▽^*)
05-10 1361
运行效果 页面代码 <link rel="stylesheet" type="text/css" href="../css/jquery-ui.css"/> <script type="text/javascript" src="../js/jquery-3.4.0.js"></script> <script type="tex...
Javascript特效：tab标签
KaiSarH
12-21 377
知识点 排他思想：有我无他。上面五个li和下面五个li，只有一个可以有class='selected’和display:block 闭包 && 为标签增加我们需要的属性 设置class的时候，必须通过className，不能直接通过class 运行效果 点击不同标签显示不同内容 代码 html <!DOCTYPE html> <html lang="e...
Js面向对象案例01：tab标签
胡图图的博客
05-28 241
运行效果 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面向对象编程</title> </head> <body> <div i
js tab选项卡
weixin_41475854的博客
05-09 647
引言：tab选项卡用的地方比较多，例如个人中心的资料展示。写个最最最简洁。复用性超强的，所以不多写css样式。太辣眼睛的话请见谅。效果如图原理：点击切换li通过添加类名显示隐藏div.两次for循环。第一步：写一个最大的div，设个宽高/边框/居中/方便观看&lt;div id="tab-list"&gt;&lt;/div&gt;&lt;style&gt;#tab-list{width: 300p...
纯js写的tab标签切换
12-25
纯js写的tab标签切换 可供参考 可用
js实现点击切换TAB标签实例
10-23
主要介绍了js实现点击切换TAB标签的方法,涉及javascript鼠标点击事件及页面元素的遍历技巧,需要的朋友可以参考下
用js实现控件的隐藏及style.visibility的使用
12-01
代码如下: <!DOCTYPE html> <html> <body> <p id=”p1″>这是一段文本。</p> <input type=”button” value=”隐藏文本” onclick=”document.getElementById(‘p1’).style.visibility=’hidden'” /> <input type=”button” value=”显示文本” onclick=”document.getElementById(‘p1’).style.visibility=’visible'” /> </body> </html>
js实现tab切换
09-30
很不错的切换效果哦，希望对大家有所帮助，同时也感谢大家的支持
js实现tab标签切换效果特效代码
03-20
js实现tab标签切换效果是一款无需jQuery，原生javascript制作的tab切换效果。
js实现的Muti TabPage切换
09-21
在很多后台管理系统中，有类似多个TagePage切换页的效果，这里是一个js实现的版本，可以实现TabPage 翻页，切换Tab选项卡，新增Tab,删除Tab等，供学习了解之用！
简单的TabView(JS+CSS)
Jerry's Blog
02-15 2811
简单的TabView(JS+CSS)先看一下效果：http://www.XiTeJia.com/我是按自己的页面需要做的。修改函数可以变得更灵活。相信根据这个思路，对新手制作TabView有帮助。JS部分：var Folder1 = new Array(Tab1,Page1); //Tab1是Tab的ID,Page1是Tab1显示的页面的IDvar Folder2 = new
js实现tab切换功能
热门推荐
一只蠢村花的博客
08-17 1万+
一、初始化html结构 &lt;div class="tab" id="tab"&gt; &lt;span class="active"&gt;工作日&lt;/span&gt; &lt;span&gt;休息日&lt;/span&gt; &lt;/div&gt; &lt;div class="tabdiv"
js 动态 添加 tabel 表格
weixin_44493841的博客
12-04 124
js 动态 添加 tabel 表格 代码 <!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <script type="text/javascript"> window.onloa
jquery-tabview详解
itaoren的专栏
03-16 1025
样例图：1: 下载相关的css 和 js    1-1 http://stilbuero.de/jquery/tabs_3/ui.tabs.css     1-2 http://stilbuero.de/jquery/tabs_3/jquery-1.2.6.js        http://stilbuero.de/jquery/tabs_3/ui.core.js        http:
jQuery实现tab标签滑动切换效果
最新发布
05-25
以下是一个简单的jQuery实现tab标签滑动切换效果的示例代码： HTML结构： ```html <div class="tab-wrap"> <ul class="tab-nav"> <li class="active">Tab1 <li>Tab2 <li>Tab3 <li>Tab4 <div class="tab-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值