用Div、CSS、JavaScript编写的Tab选项卡源代码，兼容所有浏览器

最新推荐文章于 2023-02-15 17:58:21 发布
最新推荐文章于 2023-02-15 17:58:21 发布
阅读量2.1k 收藏
点赞数
分类专栏： 静态页面 文章标签： div javascript css class stylesheet xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wgf001/article/details/4002143
版权

---------------------------------将以下代码复制，保存为css.css----------------------------------------

@charset "utf-8";
/* CSS Document */
#container
{
height:30px;
}
#tab1
{
float:left;
margin-left:100px;
width:100px;
height:30px;
border-left:1px #FF0000 solid;
border-right:1px #FF0000 solid;
border-top:1px #FF0000 solid;
background-color:#FF0000;
position:static;
}
#tab2
{
float:left;
margin-left:30px;
width:100px;
height:30px;
border-left:1px #FF0000 solid;
border-right:1px #FF0000 solid;
border-top:1px #FF0000 solid;
background-color:#FF0000;
position:relative;
}

#main
{
height:400px;
border:1px #FF0000 solid;
}

 

--------------------将以下代码复制，保存为a.html文件，与上面css文件放在同一文件夹----------------------

<!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>
<link rel="stylesheet" type="text/css" href="css.css" />
<script language="javascript" type="text/javascript">
function change(tabId)
{
  for(var i=1;i<=2;i++)//将所有选项卡设问红色背景，有下边框
  {
   document.getElementById("tab"+i).style.position="static";
   document.getElementById("tab"+i).style.backgroundColor="#FF0000";   
  }
  //将选中的选项卡设为白色背景,无下边框
  document.getElementById("tab"+tabId).style.backgroundColor="#FFFFFF";
  document.getElementById("tab"+tabId).style.position="relative";
  document.getElementById("main").innerHTML="<br />你选择了第"+tabId+"个";
}

</script>
</head>

<body>
<div id="container">
 <div id="tab1" οnclick="change(1)"></div>
    <div id="tab2" οnclick="change(2)"></div>
   
</div>
<div id="main"><br />方角选项卡实例</div>

</body>
</html>
---------------------------------将以下代码复制，保存为css2.css----------------------------------------

@charset "utf-8";
/*选项卡容器*/
#container
{
height:30px;
}
/*选项卡1的容器*/
#tab1Container
{
height:30px;
width:100px;
float:left;
margin-left:30px;
background-color:#FFFFFF;
position:static;
}
/*选项卡1*/
#tab1
{
width:100px;
height:26px;
border-left:1px #FF0000 solid;
border-right:1px #FF0000 solid;
background-color:#ff0000;
}
/*用4个b叠加实现圆角*/
b
{
border-left:1px #FF0000 solid;
border-right:1px #FF0000 solid;
background-color:#ff0000;
}
.b1
{
display:block;
height:1px;
margin:0px 5px;
width:90px;
border-top:1px #FF0000 solid;
}
.b2
{
display:block;
height:1px;
margin:0px 3px;
width:94px;
}
.b3
{
display:block;
height:1px;
margin:0px 2px;
width:96px;
}
.b4
{
display:block;
height:1px;
margin:0px 1px;
width:98px;
}
/*选项卡2的容器*/
#tab2Container
{
height:30px;
width:100px;
float:left;
margin-left:30px;
background-color:#FFFFFF;
position:static;
}
/*选项卡2*/
#tab2
{
width:100px;
height:26px;
border-left:1px #FF0000 solid;
border-right:1px #FF0000 solid;
background-color:#FF0000;
}
/*内容div*/
#main
{
height:400px;
border:1px #FF0000 solid;
}

 

--------------------将以下代码复制，保存为b.html文件，与上面css文件放在同一文件夹----------------------

<!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>
<link rel="stylesheet" type="text/css" href="css2.css" />
<script language="javascript" type="text/javascript">

function change(tabId)
{
  for(var i=1;i<=2;i++)
  {
   document.getElementById("tab"+i).style.position="static";//所有选项卡位置,底部不出现边框
   var div1=document.getElementById("tab"+i+"Container");
   var elem=div1.childNodes;
   for(var j=0;j<elem.length;j++)
   {
    elem[j].style.backgroundColor="#ff0000";//所有选项卡及圆角背景色
   }
  }
  var div1=document.getElementById("tab"+tabId+"Container");
  var elem=div1.childNodes;
  for(var i=0;i<elem.length;i++)
  {
  elem[i].style.backgroundColor="#ffffff";//选中的选项卡及圆角的背景色
  }
  document.getElementById("tab"+tabId+"Container").style.position="relative";//选中项的位置,底部出现边框
  document.getElementById("main").innerHTML="<br />你选择了第"+tabId+"个";
}
</script>
</head>

<body>
<div id="container">
    <div id="tab1Container">
        <b class="b1"></b>
        <b class="b2"></b>
        <b class="b3"></b>
        <b class="b4"></b>
        <div id="tab1" οnclick="change(1)"></div>
  </div>
      <div id="tab2Container">
        <b class="b1"></b>
        <b class="b2"></b>
        <b class="b3"></b>
        <b class="b4"></b>
        <div id="tab2" οnclick="change(2)"></div>
  </div>
</div>
<div id="main"><br />圆角选项卡实例</div>

</body>
</html>

 

---------------------------------将以下代码复制，保存为css3.css----------------------------------------

@charset "utf-8";
/*选项卡容器*/
#bodyDiv
{
width:100%;
height:400px;
}
#container
{
height:40px;
width:100px;
float:left;
}
/*选项卡1的容器*/
#tab1Container
{
margin-top:50px;
height:30px;
width:100px;
background-color:#FFFFFF;
position:static;
}
/*选项卡1*/
#tab1
{
width:100px;
height:26px;
border-left:1px #FF0000 solid;
background-color:#ff0000;
}
/*用4个b叠加实现圆角*/
b
{
border-left:1px #FF0000 solid;
background-color:#ff0000;
}
.b0
{
display:block;
height:1px;
margin-left:5px;
width:95px;
border-bottom:1px #FF0000 solid;
}
.b1
{
display:block;
height:1px;
margin-left:5px;
width:95px;
border-top:1px #FF0000 solid;
}
.b2
{
display:block;
height:1px;
margin-left:3px;
width:97px;
}
.b3
{
display:block;
height:1px;
margin-left:2px;
width:98px;
}
.b4
{
display:block;
height:1px;
margin-left:1px;
width:99px;
}
/*选项卡2的容器*/
#tab2Container
{
margin-top:30px;
height:30px;
width:100px;
background-color:#FFFFFF;
position:static;
}
/*选项卡2*/
#tab2
{
width:100px;
height:26px;
border-left:1px #FF0000 solid;
background-color:#FF0000;
}
/*内容div*/
#main
{
height:400px;
width:400px;
float:left;
border:1px #FF0000 solid;
}

 

 

 

--------------------将以下代码复制，保存为c.html文件，与上面css文件放在同一文件夹----------------------

<!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>
<link rel="stylesheet" type="text/css" href="css3.css" />
<script language="javascript" type="text/javascript">

function change(tabId)
{
  for(var i=1;i<=2;i++)
  {
   document.getElementById("tab"+i).style.position="static";//所有选项卡位置,底部不出现边框
   var div1=document.getElementById("tab"+i+"Container");
   var elem=div1.childNodes;
   for(var j=0;j<elem.length;j++)
   {
    elem[j].style.backgroundColor="#ff0000";//所有选项卡及圆角背景色
   }
  }
  var div1=document.getElementById("tab"+tabId+"Container");
  var elem=div1.childNodes;
  for(var i=0;i<elem.length;i++)
  {
  elem[i].style.backgroundColor="#ffffff";//选中的选项卡及圆角的背景色
  }
  document.getElementById("tab"+tabId+"Container").style.position="relative";//选中项的位置,底部出现边框
  document.getElementById("main").innerHTML="<br />你选择了第"+tabId+"个";
}
</script>
</head>

<body>
<div id="bodyDiv">
 <div id="container">
  <div id="tab1Container">
   <b class="b1"></b>
   <b class="b2"></b>
   <b class="b3"></b>
   <b class="b4"></b>
   <div id="tab1" οnclick="change(1)"></div>
   <b class="b4"></b>
   <b class="b3"></b>
   <b class="b2"></b>
   <b class="b0"></b>
   </div>
    <div id="tab2Container">
   <b class="b1"></b>
   <b class="b2"></b>
   <b class="b3"></b>
   <b class="b4"></b>
   <div id="tab2" οnclick="change(2)"></div>
   <b class="b4"></b>
   <b class="b3"></b>
   <b class="b2"></b>
   <b class="b0"></b>
   </div>
 </div>
 <div id="main"><br />圆角选项卡实例</div>
</div>
</body>
</html>

---------------------------------完----------------------------------

引用请注明出处

 

 

 

wgf001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Tab选项卡切换代码.zip
07-05
Tab选项卡切换代码是一款简单的jquery tab选项卡切换代码样式，可以修改tab选项卡相关样式。
tab选项卡代码
dengbeizhuo8768的博客
05-27 71
$('.case_header ul li').click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('.case_list').eq($(this).index()).show().siblings().hide(); ...
tab选项卡简易代码
从零出发
06-04 6372
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tab选项卡代码</title> <style type="text/css"> .title { width: 500px; height: 50...
tab选项卡代码（原生js）
weixin_30644369的博客
09-28 177
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab选项卡一练习</title> <style> *{ margin: 0px; padding: 0...
常用tab选项卡代码
weixin_30561425的博客
08-07 152
<div class="box"> <ul> <li class="one">课程介绍</li> <li>报名流程</li> <li>常见问题</li> </ul> <div class="cont...
上下弹性切换Tab选项卡jquery代码
01-23
"上下弹性切换Tab选项卡jquery代码"是一个利用JavaScript库jQuery实现的交互效果，使得Tab选项卡在上下方向上进行弹性动画切换，提升了用户体验。 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历...
jQuery多个tab切换选项卡代码.zip
07-05
总的来说，"jQuery多个tab切换选项卡代码.zip"是一个实用的资源，它提供了关于如何使用jQuery实现动态选项卡切换的实例，对于初学者和有经验的开发者来说都是一个宝贵的参考资料。通过学习和实践这个例子，你可以...
NO JS css3 Tab页签切换效果选项卡切换源码下载
11-22
“NO JS css3 Tab页签切换效果选项卡切换源码下载”这个标题表明，这是一个不依赖JavaScript的CSS3实现的选项卡切换效果的源代码资源。"NO JS"强调了此代码主要利用CSS3技术，而非常见的JavaScript进行交互设计。...
移动端tab选项卡网页特效
11-22
在本项目中，"texiao3564_1560681138"压缩包文件可能包含了实现这种特效的源代码、样式表（CSS）、脚本（JavaScript）以及示例页面。 首先，我们要理解移动端选项卡的基本结构。它一般由三部分组成：标签导航、内容...
TAB选项卡终极版
鑫鑫的博客
08-01 185
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;38-TAB选项卡终极&lt;/title&gt; &lt;style&gt; *{ marg
tab菜单php代码,各种效果的tab选项卡菜单代码
weixin_31523833的博客
04-14 370
网页代码：————————————————————————————————————tabh2{ margin:0;}ul{ padding:0; margin:0;}.tab{ width:400px; margin:30px auto 0; font-size:12px; color:#555; border:1px solid #ccc;}.tab h2{ width:100%; overfl...
tab(选项卡)
wang_kai_7的博客
10-11 800
模仿layui效果图如下： 两者除了css方面不同，一个用border属性实现，一个用伪元素实现，其他逻辑都相同,在readme.md中有详细介绍 在线预览：demo1.html 在线预览：demo2.html 代码及思路地址：代码及思路 思路截图：  ...
JavaScript经典案例(Tab选项卡)
qq_53278657的博客
02-15 245
JavaScript经典案例(Tab选项卡)
div+css js选项卡
zisetoufa
03-18 102
DIV+CSS选项卡演示-爱JavaScript中文网 /*TAB布局*/ #tab * {font-size:12px;} #tab h3 a {display:inline-block;} #tab h3 a {display:block;} #tab {position:relative;} #tab h3,#tab ul,#tab div,#ta...
CSS布局特点
weixin_34015336的博客
11-28 201
CSS布局特点　　对于蜘蛛在爬行一个网站的页面时，若是有太多的垃圾代码，会使搜索蜘蛛对其产生不友好、不信任感，同时蜘蛛的爬行速度也会因此而减缓，对于网站SEO而言，可谓一大忌。就如传统的用table页面，对此我们就需要对网站进行代码优化，而这便需要动用CSS+div了，下面便来谈谈使用CSS+div进行代码优化的一些益处。一.精简代码，建设重构难度。　　网站使用DIV+CSS...
tab选项卡实现的4种方式
weixin_68014318的博客
08-02 484
tab栏选项卡，jquery实现tab栏选项卡
Div+CSS选项卡
weixin_30906185的博客
07-06 83
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D...
TAB选项卡效果（DIV+CSS ）
星之空
05-31 3711
New Document ul { margin:0; padding:0; list-style-type:none; vheight:24px; } ul li { float:left; display:inline; } ul a { text-decoration: none; border-top:1px solid #ddd; border-bottom:1px solid
div+css+js实现竖向排列的标签选项卡
weixin_30245867的博客
01-28 881
<!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 htt...
JavaScript编写一个选项卡代码
最新发布
03-12
以下是一个简单的 JavaScript 选项卡代码： HTML 代码： ``` <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">选项卡1 <button class="tablinks" onclick="openTab(event, 'tab2'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值