js实现tab选项卡函数代码

312 阅读 0 评论 206 点赞

我是靠谱客的博主清新火车，这篇文章主要介绍js实现tab选项卡函数代码，现在分享给大家，希望可以做个参考。

<html> 
<head> 
<style type="text/css"> 
* 
{ 
padding-bottom: 0px; 
margin: 0px; 
padding-left: 0px; 
padding-right: 0px; 
font-size: 12px; 
padding-top: 0px; 
} 
BODY 
{ 
padding-left: 20px; 
padding-top: 20px; 
} 
.wid240 
{ 
width: 242px; 
margin-bottom: 20px; 
} 
.wid180 
{ 
width: 182px; 
} 
.tab 
{ 
border-bottom: #000 1px solid; 
border-left: #000 1px solid; 
border-top: #000 1px solid; 
border-right: #000 1px solid; 
} 
.tab UL 
{ 
zoom: 1; 
clear: both; 
} 
.tab UL:after 
{ 
display: block; 
height: 0px; 
visibility: hidden; 
clear: both; 
content: ""; 
} 
.tab UL LI 
{ 
text-align: center; 
line-height: 26px; 
width: 60px; 
display: inline; 
background: #000; 
float: left; 
height: 26px; 
color: #fff; 
} 
.tab UL LI.on 
{ 
background: #fff; 
color: #000; 
} 
.tabList 
{ 
border-bottom: #000 1px solid; 
border-left: #000 1px solid; 
height: 150px; 
border-top: #000 1px; 
border-right: #000 1px solid; 
} 
.tabList .one 
{ 
padding-bottom: 10px; 
padding-left: 10px; 
padding-right: 10px; 
display: none; 
color: #ff0000; 
padding-top: 10px; 
} 
.tabList .block 
{ 
display: block; 
} 
</style>

<meta name="GENERATOR" content="MSHTML 8.00.7600.16535"> 
</head> 
<body> 
<div class="wid240"> 
<div class="tab"> 
<ul> 
<li id="one1" class="on" onmouseover='setTab("one",1,4)'>one1 </li> 
<li id="one2" onmouseover='setTab("one",2,4)'>one2 </li> 
<li id="one3" onmouseover='setTab("one",3,4)'>one3 </li> 
<li id="one4" onmouseover='setTab("one",4,4)'>one4 </li> 
</ul> 
</div> 
<div class="tabList"> 
<div id="cont_one_1" class="one block"> 
cont_one_1</div> 
<div id="cont_one_2" class="one"> 
cont_one_2</div> 
<div id="cont_one_3" class="one"> 
cont_one_3</div> 
<div id="cont_one_4" class="one"> 
cont_one_4</div> 
</div> 
</div> 
<div class="wid180"> 
<div class="tab"> 
<ul> 
<li id="tow1" class="on" onclick='setTab("tow",1,3)'>tow1 </li> 
<li id="tow2" onclick='setTab("tow",2,3)'>tow2 </li> 
<li id="tow3" onclick='setTab("tow",3,3)'>tow3 </li> 
</ul> 
</div> 
<div class="tabList"> 
<div id="cont_tow_1" class="one block"> 
cont_tow_1</div> 
<div id="cont_tow_2" class="one"> 
cont_tow_2</div> 
<div id="cont_tow_3" class="one"> 
cont_tow_3</div> 
</div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最后

以上就是清新火车最近收集整理的关于js实现tab选项卡函数代码的全部内容，更多相关js实现tab选项卡函数代码内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

点赞(206)

本文分类：JavaScript
浏览次数：312 次浏览
发布日期：2022-04-08 12:11:05
本文链接：https://www.kaopuke.com/article/k-p-k_13_uzo_22_f3_13_j_22__27_.html

相关文章

Photoshop制作有质感的蓝色磨砂背景

Photoshop制作有质感的蓝色磨砂背景

教你用PS+AI绘制一枚AppleWatch奖章图标

教你用PS+AI绘制一枚AppleWatch奖章图标

AI给图片加上漂亮的放射光线效果

AI给图片加上漂亮的放射光线效果

PS教程:人物写真照片你也能自己做

PS教程:人物写真照片你也能自己做

js实现tab选项卡函数代码

RX560D配什么CPU好？以及RX560D搭配什么主板和多大内存合适？

RX560D配什么CPU好？以及RX560D搭配什么主板和多大内存合适？

PHP编码规范的深入探讨

win7系统网络邻居显示不全只能看到2台计算机的解决方法图

win7系统网络邻居显示不全只能看到2台计算机的解决方法图

评论列表共有 0 条评论

发表评论取消回复

立即
投稿返回
顶部