纯CSS简洁的TAB切换效果代码

最新推荐文章于 2021-06-03 03:24:26 发布
最新推荐文章于 2021-06-03 03:24:26 发布
阅读量832 收藏
点赞数
分类专栏： CSS JavaScript

http://www.111cn.net/js_a/javascript/38476.htm

<!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=gb2312" />
<title>纯CSS简洁的TAB切换效果</title>
<style type="text/css">
<!--
body, div, ul, li { margin:0 auto; padding:0; }
body { font:12px "宋体"; text-align:center; }
a:link { color:#00F; text-decoration:none; }
a:visited { color: #00F; text-decoration:none; }
a:hover { color: #c00; text-decoration:underline; }
ul { list-style:none; }
.main { clear:both; padding:8px; text-align:center; }
/*第一种形式*/
#tabs0 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; }
.menu0 { width: 400px; }
.menu0 li { display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; background: #FFFFff; }
.menu0 li.hover { background: #f2f6fb; }
#main0 ul { display: none; }
#main0 ul.block { display: block; }
/*第二种形式*/
#tabs1 { text-align:left; width:400px; }
.menu1box { position:relative; overflow:hidden; height:22px; width:400px; text-align:left; }
#menu1 { position:absolute; top:0; left:0; z-index:1; }
#menu1 li { float:left; display:block; cursor:pointer; width:72px; text-align:center; line-height:21px; height:21px; }
#menu1 li.hover { background:#fff; border-left:1px solid #333; border-top:1px solid #333; border-right:1px solid #333; }
.main1box { clear:both; margin-top:-1px; border:1px solid #333; height:181px; width:400px; }
#main1 ul { display: none; }
#main1 ul.block { display: block; }
/*第三种形式*/
.menu2box { position:relative; overflow:hidden; height:22px; width:400px; text-align:left; background: #FFFFff; }
#tabs2 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; }
#tip2 { position:absolute; top:0; left:0; height:22px; line-height:22px; z-index:0; width:100px; background: #f2f6fb; }
#menu2 { position:absolute; top:0; left:0; z-index:1; }
#menu2 li { display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; }
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3[n];
}
//-->
</script>
</head>
<body>
<!--第一种形式-->
<div id="tabs0">
<ul class="menu0" id="menu0">
<li οnclick="setTab(0,0)" class="hover">新闻</li>
<li οnclick="setTab(0,1)">评论</li>
<li οnclick="setTab(0,2)">技术</li>
<li οnclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block">
<li>新闻列表</li>
</ul>
<ul>
<li>评论列表</li>
</ul>
<ul>
<li>技术列表</li>
</ul>
<ul>
<li>点评列表</li>
</ul>
</div>
</div>
<br />
<br />
<!--第二种形式-->
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" οnmοuseοver="setTab(1,0)"><a href="#">新闻</a></li>
<li οnmοuseοver="setTab(1,1)"><a href="#">评论</a></li>
<li οnmοuseοver="setTab(1,2)"><a href="#">技术</a></li>
<li οnmοuseοver="setTab(1,3)"><a href="#">点评</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block">
<li>新闻列表</li>
</ul>
<ul>
<li>评论列表</li>
</ul>
<ul>
<li>技术列表</li>
</ul>
<ul>
<li>点评列表</li>
</ul>
</div>
</div>
</div>
<br />
<br />
<!--第三种形式-->
<div id="tabs2">
<div class="menu2box">
<div id="tip2"></div>
<ul id="menu2">
<li class="hover" οnmοuseοver="nowtab(2,0)"><a href="#">新闻</a></li>
<li οnmοuseοver="nowtab(2,1)"><a href="#">评论</a></li>
<li οnmοuseοver="nowtab(2,2)"><a href="#">技术</a></li>
<li οnmοuseοver="nowtab(2,3)"><a href="#">点评</a></li>
</ul>
</div>
<div class="main" id="main2"> 新闻内容 </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html></td>
   </tr>
 </table>
更多详细内容请查看：http://www.111cn.net/js_a/javascript/47273.htm

mituan1234567
关注
专栏目录
css实现tab切换
jvid_sky的博客
11-21 5530
tab切换在项目中也算是常用技术，一般实现tab切换都用js或者jq实现，今天给大家介绍两种只用css实现tab切换方法： 方法一： 原理：通过label标签的关联属性和input的单选类型实现相应div的显示 1.创建一个类名为wrap的div当作容器 2.创建四个label标签，这将作为tab切换项 3.在每一个label中创建一个span标签（导航内容），input标签（实现选中于
Html 和 CSS 实现 Tab 切换效果
代码如风
03-20 2327
Html 和 CSS 实现Tab 切换效果 纯CSS实现，没有引用任何JS 效果如下： 通过模拟单选框Radio来实现 HTML代码： <div class="container"> <ul> <li> <input type="radio" name="changeTab" id="t1" checked="checked"> ...
css3实现的tab标签切换效果
01-09
css3实现的tab标签切换效果
简单的tab切换代码
09-17
代码很简单,只要认真看就会看得懂的.这个效果没有那么好看,但是主要还是看其中的代码的思想和方法!
最简单的Tab切换
热门推荐
baidu_41601299的博客
04-16 1万+
HTML <div class="main"> <div class="btn"> <!-- Tab标题 --> <span class="active spanList">课程介绍</span> <span class="spanList">用户故事</spa...
JS实现Tab切换，超简单只有几行代码
03-27
JS实现Tab切换，超简单只有几行代码，点击按钮，在同一页面的不同内容切换
tab切换
weixin_30383279的博客
01-06 74
<style>*{ margin:0; padding:0;list-style: none;}body {font:12px/1.5 Tahoma;}#outer {width:450px;margin:150px auto;}#tab {overflow:hidden;zoom:1;background:#000;border:1px solid #000;}#tab li {fl...
纯CSS实现导航栏Tab切换效果
09-27
在当前网页设计中，实现Tab切换效果通常需要借助JavaScript等脚本语言，但是使用纯CSS同样能够完成这种效果。首先，要了解的关键概念是CSS3中的:target伪类。:target伪类是一个选择器，用于选取URL中ID与锚点匹配的...
纯css半圆角tab标签切换代码
06-10
本项目名为“纯css半圆角tab标签切换代码”，它包含了六个HTML文件，每个文件代表一种不同的Tab状态或布局，用于实现平滑的切换效果。 首先，我们要理解CSS（Cascading Style Sheets）的作用。CSS是一种样式表语言...
纯CSS实现Tab切换标签效果代码
01-21
本文实例讲述了纯CSS实现Tab切换标签效果代码。分享给大家供大家参考。具体如下： 这是一款纯CSS实现的Tab简洁版，很不错的效果，希望大家喜欢。 运行效果截图如下： 在线演示地址如下： ...
简洁的tab切换代码
08-29
简介的tab切换代码方便您的web开发 支持多个tab切换
tab切换html代码
03-30
tabs切换
最简单的tab切换实例代码
11-23
JS： $(".con").eq(0).show(); $(".btn span").click(function(){ var num =$(".btn span").index(this); $(".con").hide(); $(".con").eq(num).show().slblings().hide(); }) CSS： body { cursor:default; -webkit-text-size-adjust:none; font-size:12px; font-family:Arial; background:#FFF; } .cle
Tab选项卡切换代码.zip
07-05
Tab选项卡切换代码是一款简单的jquery tab选项卡切换代码样式，可以修改tab选项卡相关样式。
HashTabber垂直tab切换效果代码
09-17
HashTabber垂直tab切换效果代码
纯CSS简洁TAB标签特效代码
03-20
4. **过渡与动画**：`transition`属性用于平滑地改变一个或多个CSS属性，为TAB切换添加平滑的过渡效果。如果需要更复杂的动画，可以使用`@keyframes`规则创建自定义动画。 5. **响应式设计**：为了确保在不同屏幕...
tab导航切换代码
weixin_40945354的博客
01-28 166
<!-- xxx.hml --> <div class="container"> <tabs class = "tabs" index="0" vertical="false" οnchange="change"> <tab-bar class="tab-bar" mode="fixed"> <text class="tab-text">Home</text> &l
html5纯 css tab切换效果,HTML5+CSS3 实现灵动的动画 TAB 切换效果
weixin_32516271的博客
06-03 680
设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。最终实现效果如下：为了 gif 动画能够展示细节，我将动画时间延长到了 3 秒代码分享地址：http://runjs.cn/detail/h2dqt3td实现思路间隔竖线，因为不是顶天立地的，所以不能用边框。我准备用伪元素实现。只有 3 个竖线，但是有 4...
HTML/CSS实现tab切换效果详解
"本文主要介绍了几种常见的Tab切换效果的实现代码，包括鼠标移入移出切换的示例。这些示例对于理解和创建交互式的网页界面非常有帮助，特别是对于初学者或前端开发者来说，提供了很好的参考素材。" 在网页设计中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值