js实现简单选项卡功能
作者:Max-人定 发布时间:2024-04-22 13:05:47
标签:js,选项卡
本文为大家分享了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实现选项卡的方法,只需三行,等下次有机会弄懂了再分享。
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
来源:https://blog.csdn.net/qq_41148850/article/details/81773463
0
投稿
猜你喜欢
- Sqlserver 获取每组中的第一条记录在日常生活方面,我们经常需要记录一些操作,类似于日志的操作,最后的记录才是有效数据,而且可能它们属
- 查看逻辑读前10的SQL:set linesize 300;set pagesize 300;set long 50000;SELECT *
- 前言scikit-learn是Python中最流行的机器学习库之一,它提供了各种各样的机器学习算法和工具,包括分类、回归、聚类、降维等。sc
- 如下所示:#!/usr/bin/python#coding:utf-8import MySQLdbimport time,datetime#
- 设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传统
- 经我们技术员检查,结果原来是eWebEditor文本编辑器对IE8浏览器的兼容性导致的脚本错误,并不是什么“网站空间、服务器中毒、出问题了”
- 网页制作中是免不了与表格打交道的。表格是网页制作的基础,在网页布局中起着举足轻重的作用,熟练掌握表格的操作,是你制作网页的辅路石,也是你成为
- 先登录MySQLshell> mysql --user=root mysql有密码的需要添加 –password 或-p 选项添加用户
- 将一个四位数反向输出massage = '''将一个四位数,反向输出'''N = input
- 总是记不住API。昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧:python中对文件、文件夹(文件操作函数)的操作需要涉及到os
- 本文实例讲述了Python根据已知邻接矩阵绘制无向图操作。分享给大家供大家参考,具体如下:有六个点:[0,1,2,3,4,5,6],六个点之
- var getWindow = function(obj) { var&nbs
- 背景本文主要给大家介绍了关于在Python一段程序中使用多次事件循环的相关内容,我们在Python异步程序编写中经常要用到如下的结构impo
- 很多人认为python中的字典是无序的,因为它是按照hash来存储的,但是python中有个模块collections(英文,收集、集合),
- 演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
- 前几天帮人调试一个ASP+SQL2000+IIS5.1/6.0的网站程序,调试过程中遇到的问题如下:一、 SQLServer登录 原先存在备
- 下面给大家介绍远程连接mysql错误代码1130的解决方法:以上所述是小编给大家介绍的远程连接mysql错误代码1130的解决方法网站的支持
- 这篇文章主要介绍了调用其他python脚本文件里面的类和方法过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习
- 概述在使用Typora写比较长的文章时,需要给章节编号,方便区分层次。如果手动编号,一旦章节顺序改变,很多章节的编号都需要一一手动修改,极其
- 如何结束Python的子线程和子进程结束子线程的方法:这个是搬运其他大神的代码,鄙人也不知道原理,反正拿来主义,暂时没发现什么缺点,先用着再