基于JavaScript实现TAB标签效果资源-CSDN文库

136 浏览量 2020-10-23 00:02:50 上传评论收藏 39KB PDF 举报

资源推荐

资源详情

资源评论

基于基于JavaScript实现实现TAB标签效果标签效果

js实现tab标签效果，在项目中经常用到，今天抽点时间把我写的js实现tab标签效果源码分享给大家，对js tab标签

代码需要的朋友参考下

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

友参考下

废话不多说了，直接给大家贴代码了：

<html>

<head>

<title>TAB选项卡效果</title>

<!--

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>

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>

<div id=TabTab03Con1> 不规则TAB选项卡效果1</div>

<div id=TabTab03Con2 style="display:none">不规则TAB选项卡效果2</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38628920

粉丝: 4
资源: 962

基于JavaScript实现TAB标签效果

JavaScript实现Tab标签页切换的最简便方式(4种)

基于js的iframe 可关闭tab标签组件使用方法

dcat-iframe-tab:在dcat-admin中使用iframe作为页面架构并发布标签页使页面切换无需刷新

基于JavaScript实现前端数据多条件筛选功能

展示效果（原生JS）

一个基于jQuery实现的宽屏图片展示效果源码例子

一款基于Taro底部导航组件支持最多5个tabbar

js(JavaScript)实现TAB标签切换效果的简单实例

JavaScript版TAB选项卡效果实例

使用Iframe实现TAB页面切换

iframe里无右键菜单

页面拖拽标签

HTML经典教材-iframe详细介绍

JavaScript TAB栏切换效果的示例

JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

雅虎TAB效果代码 Javascript实现

JavaScript实现的可暂定滚动的TAB标签代码

javascript实现的淡入淡出效果的TAB标签源码

js实现点击切换TAB标签实例

基于JavaScript实现移动端TAB触屏切换效果

JS141-13淡入淡出效果的TAB标签

JQuery单击实现TAB切换效果

淡入淡出效果的TAB标签

纯CSS实现的雅虎TAB效效果

基于GridView和ActivityGroup实现的TAB分页

最新资源