js封装tab标签页实例分享
话不多说，请看代码
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
*{ padding:0; margin:0;}
.block{ display:block;}
.none{ display:none;}
#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
#tab1,#tab2{ list-style:none;}
#tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
#tab2 li:hover{ background:#CCC;}
#tab1 li.on,#tab2 li.on{ background:#9C3;}
#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
</style>
</head>
<body>
<div id="wrap">
<ul id="tab1">
<li class="on">第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
<div id="wraps">
<ul id="tab2">
<li class="on">第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
<script type="text/javascript">
tab("wrap","tab1","mouseover")
tab("wraps","tab2");
function tab(wrap,navul,eve){
//tab效果封装，目前只有两种变换方式，一种为点击事件click（也是默认事件），另外一种为鼠标移过事件mouseover
var divs=document.getElementById(wrap).getElementsByTagName("div");
var lis=document.getElementById(navul).getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].indx=i;
if(eve=="click" || eve==null){
lis[i].onclick=function(){
for(i=0;i<lis.length;i++){
lis[i].className="";
divs[i].className="none";
this.className="on";
divs[this.indx].className="block";
}
}
}else if(eve=="mouseover"){
lis[i].onmouseover=function(){
for(i=0;i<lis.length;i++){
lis[i].className="";
divs[i].className="none";
this.className="on";
divs[this.indx].className="block";
}
}
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
使用SUI可以轻松的展示Tab标签页，在一个页面中展示更多相关内容，可能是不同的状态信息，例如订单的各个状态筛选，文章的审核状态等等。 一级标签页 <header class="bar bar-nav"> <h1 class='title'>标签页</h1> </header> <div class="content"> <div class="buttons-tab">
-
引入 import { createApp } from 'vue'; import { Tab, Tabs } from 'vant'; const app = createApp(); app.use(Tab); app.use(Tabs); 代码演示 基础用法 通过 v-model:active 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。 <van-tabs v-model
-
使用指南 组件介绍 选项卡切换组件，常用于平级区域大块内容的的收纳和展现。 引入方式 import { Tab, TabItem } from 'feart'; components: { 'fe-tab': Tab, 'fe-tab-item': TabItem } 代码演示 基础用法 <fe-tab v-model="active"> <fe-tab-item lab
-
标签页组件。 Usage 全部引入 import { Tab } from 'beeshell'; 按需引入 import Tab from 'beeshell/dist/components/Tab'; Examples Code 详细 Code <Tab value={1} scrollable={true} data={[ { value: 1,
-
本文向大家介绍js实现点击切换TAB标签实例，包括了js实现点击切换TAB标签实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下： 这里演示的选项卡效果代码，无jq,纯JS来实现，灰色风格，没有怎么美化，或许看上去比较普通，不过兼容性和操作起来挺舒服的，风格适用于大部分的网站，或许你会用得上。 先来看看运行效果截图： 在线演示地址
-
本文向大家介绍js实现的tab标签切换效果代码分享，包括了js实现的tab标签切换效果代码分享的使用技巧和注意事项，需要的朋友参考一下 这是一款基于js实现的tab标签切换效果，是一款无需jQuery，原生javascript制作的tab切换效果源码。点击上面的标题即可实现对应页面的切换功能，非常具有实用价值。 运行效果图：-------------------查看效果 下载源码---------