js实现简单选项卡功能

2024-10-21 10:16:54

本文为大家分享了js实现简单选项卡功能的具体代码，供大家参考，具体内容如下

首先我们来写HTML代码，构建出整体结构

代码如下：

<!--导航栏部分HTML代码-->
<nav id="nav">
 <ul>
 <li class="act">选卡1</li>
 <li>选卡2</li>
 <li>选卡3</li>
 <li>选卡4</li>
 </ul>
</nav>
<!--内容部分HTML代码-->
<div id="container">
 <section class="tab" style="background-color: tomato">内容1</section>
 <section class="tab" style="background-color: cyan">内容2</section>
 <section class="tab" style="background-color: blueviolet">内容3</section>
 <section class="tab" style="background-color: gold">内容4</section>
</div>

注：section 部分添加了style，目的是方便演示，为规范HTML与css的代码风格，不推荐这样使用。

接着我们使用css代码构建出样式

代码如下：

*{
 text-align: center;
 }
 nav li{
 display: inline;
 width: 24%;
 text-decoration: none;
 padding: 15px;
 }
 li:hover{
  background-color: lightblue;
 }
 section{
  height: 300px;
}

最后是js的代码，实现选项卡功能

代码如下：

window.onload=function () {
 //获取 li 也就是选项卡选项tab
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');
 //获取 包裹在container里面的section（内容）
 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 //使用 循环依次得到li
 for(var i=0;i<oNav.length;i++){
  oNav[i].index=i;
 //每一次得到li后执行鼠标点击操作则触发函数function
  oNav[i].onclick=function () { //此处除了可以使用onclick，还可以使用onmouseover
 //在li的个数内依次展示内容
  for(var i=0;i<oNav.length;i++){
   oNav[i].className='';
   oDiv[i].style.display="none";
  }
  this.className='act';
  oDiv[this.index].style.display="block"
  }
  for(var m=1;m<oNav.length;m++){
   oNav[m].className='';
   oDiv[m].style.display="none";
  }
 }
};

此上就是用js实现简单选项卡的全部内容，下面是整个代码，复制粘贴到编译器即可运行

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
  text-align: center;
 }
 nav li{
  display: inline;
  width: 24%;
  text-decoration: none;
  padding: 15px;
 }
 li:hover{
  background-color: lightblue;
 }
 section{
  height: 300px;
 }
 </style>
</head>
<body>
<!--导航栏部分HTML代码-->
<nav id="nav">
 <ul>
 <li class="act">选卡1</li>
 <li>选卡2</li>
 <li>选卡3</li>
 <li>选卡4</li>
 </ul>
</nav>
<!--内容部分HTML代码-->
<div id="container">
 <section class="tab" style="background-color: tomato">内容1</section>
 <section class="tab" style="background-color: cyan">内容2</section>
 <section class="tab" style="background-color: blueviolet">内容3</section>
 <section class="tab" style="background-color: gold">内容4</section>
</div>
<script>
 window.onload=function () {
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');

 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 for(var i=0;i<oNav.length;i++){
  oNav[i].index=i;
  oNav[i].onclick=function () {
  for(var i=0;i<oNav.length;i++){
   oNav[i].className='';
   oDiv[i].style.display="none";
  }
  this.className='act';
  oDiv[this.index].style.display="block"
  }
  for(var m=1;m<oNav.length;m++){
   oNav[m].className='';
   oDiv[m].style.display="none";
  }
 }
 };
</script>
</body>
</html>

以下是效果图

注：网上还用很多用jQuery实现选项卡的方法，只需三行，等下次有机会弄懂了再分享。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js自定义Tab选项卡效果

自定义Tab选项卡,具体内容如下规范HTML格式在设计选项卡之前,先规范一下HTML的格式. <div class="m-tab-container"> <ul > <li class="active"><a href="#pane1">面板1</a></li> <li><a href="#pane2" rel="exter
基于JS实现网页中的选项卡（两种方法）

网页中经常会用到选项卡这种东东,说白了就是点击一个选项,下面会弹出这个选项里的内容. 方法一: 方法一利用简单的代码即可实现,以下是全部的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;}
vuejs实现标签选项卡动态更改css样式的方法

html <ul class="header-list"> <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}
JS实现选项卡效果的代码实例

选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧. 先来布局一个简单的页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #box
js鼠标经过tab选项卡时实现切换延迟

偶然间在浏览网页时,发现这样的效果.当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换. 个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要请求数据时,会避免不必要的异步请求:2.避免页面在用户不需要的时候切换跳动,影响用户体验. 网上查阅了几个方法,发现下面的方法更简洁有效.整理下来,供以后参考. 其中的重点是那段js代码:原理是,通过hover的时候设置定时器,延迟执行切换方法,离开时,清楚计时器.当hover的时间小于延迟时间时,
js实现Tab选项卡切换效果

本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tab.css"> <script src="tab.js&quo
AngularJS标签页tab选项卡切换功能经典实例详解

本文实例讲述了AngularJS实现标签页tab选项卡功能.分享给大家供大家参考,具体如下: 选项卡一: JavaScript+html+css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net js标签页tab切换</title> <style> #div1 .active{ background:blue
AngularJS实现tab选项卡的方法详解

本文实例讲述了AngularJS实现tab选项卡的方法.分享给大家供大家参考,具体如下: 一.代码实现 <!DOCTYPE html> <html ng-app='app'> <head> <meta charset="UTF-8"> <title></title> <style> *{ list-style: none; margin: 0; padding: 0; } .TabNav{ height
Vue.js tab实现选项卡切换

本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo
使用vue.js写一个tab选项卡效果

通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti

js实现简单选项卡功能

相关推荐

随机推荐