几种tab切换详解

1.鼠标移入移出切换




 
 tab切换
 
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;

 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 


 
 
 
 
 女枪
 提莫
 盖伦
 剑圣
 
 
 
 
 
 我有两把枪，一把叫射，另一把叫，啊~
 你有一双迷人的眼睛，我非常喜欢！
 
 
 我去前面探探路
 提莫队长正在待命！
 
 
 放马过来吧，你会死的很光荣的！
 快点儿结束吧，我头有点儿转晕了……
 
 
 我的剑就是你的剑。
 眼睛多，看东西才会更加清楚

2.鼠标移入移出延时切换




 
 tab切换之延时切换
 
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;
 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 


 
 
 
 
 女枪
 提莫
 盖伦
 剑圣
 
 
 
 
 
 我有两把枪，一把叫射，另一把叫，啊~
 你有一双迷人的眼睛，我非常喜欢！
 
 
 我去前面探探路
 提莫队长正在待命！
 
 
 放马过来吧，你会死的很光荣的！
 快点儿结束吧，我头有点儿转晕了……
 
 
 我的剑就是你的剑。
 眼睛多，看东西才会更加清楚

3. tab自动切换，鼠标移入移出立即切换




 
 tab切换之自动切换
 
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;
 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 


 
 
 
 
 女枪
 提莫
 盖伦
 剑圣
 
 
 
 
 
 我有两把枪，一把叫射，另一把叫，啊~
 你有一双迷人的眼睛，我非常喜欢！
 
 
 我去前面探探路
 提莫队长正在待命！
 
 
 放马过来吧，你会死的很光荣的！
 快点儿结束吧，我头有点儿转晕了……
 
 
 我的剑就是你的剑。
 眼睛多，看东西才会更加清楚

4. 广告栏切换实例



 
 
 document
 
 * {
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .wrap {
 height: 170px;
 width: 490px;
 margin: 20px auto;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
 }
 .wrap ul {
 position: absolute;
 }
 .wrap ul li {
 height: 170px;
 }
 .wrap ol {
 position: absolute;
 right: 5px;
 bottom: 10px;
 }
 .wrap ol li {
 height: 20px;
 width: 20px;
 background: #ccc;
 border: solid 1px #666;
 margin-left: 5px;
 color: #000;
 float: left;
 line-height: center;
 text-align: center;
 cursor: pointer;
 }
 .wrap ol .on {
 background: #E97305;
 color: #fff;
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 1
 2
 3
 4
 5

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！

几种tab切换详解

JavaScript相关栏目本月热门文章