如何利用js实现选项卡效果（超简单）

最新推荐文章于 2023-07-01 18:20:34 发布

夜深人静_

最新推荐文章于 2023-07-01 18:20:34 发布

阅读量5.3k

点赞数 11

分类专栏：前端文章标签： js javascript 前端

本文链接：https://blog.csdn.net/weixin_46236141/article/details/105260281

版权

本文介绍了如何利用HTML、CSS和JavaScript实现简单的选项卡效果。通过基础布局和JavaScript动态切换，点击事件触发内容切换，也可调整为鼠标移入事件。核心在于JavaScript代码的事件处理和class名切换。

摘要由CSDN通过智能技术生成

在开始写我们的选项卡之前，先来看一下最终实现的大概效果：
在这里插入图片描述
那废话不多说，接下来就看看如何去实现这个效果。

首先，利用我们的 html 和 css 基础，写出选项卡的基本布局：

html代码：

<div class="news">
	<ul>
		<li class="active">标题1</li>
		<li>标题2</li>
		<li>标题3</li>
	</ul>
	<ol>
		<li class="active">内容1

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夜深人静_

关注关注

11
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS实现选项卡效果

m0_46647730的博客

06-30

349

选项卡

JS选项卡

xing942012的博客

11-25

2499

我们做一个简易的选项卡，但是适用所有的选项卡（自改），首先我们来先把页面基本样式写好 <ul> <li class="active">周一</li> <li>周三</li> <li>周五</li> </ul> <div class="box1 block">医务科</div> <div class="box2">警卫科</div>

2 条评论您还未登录，请先登录后发表或查看评论

Javascript实现简单的选项卡

淡忘~浅思

06-14

1264

实践题 - 选项卡

weixin_30302609的博客

06-24

188

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> *{padding:0px;marg...

js实现选项卡效果

zhuxufeifei的博客

11-22

216

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:

JS代码实现选项卡功能

米兰小铁匠的博客

02-11

872

在平时的网页开发中会遇到很多选项卡功能的情况，下面通过一个简单的例子说明选项卡如何实现首先，选项卡基本的样式会有可以点击的选项按钮，以及按钮对应的显示内容。这是一个基本的选项卡应该具备的两大部分。所以我在结构的布局上选用： 1、一个大DIV中套有三个button，三个小div。 2、内部样式中将三个小div全部display none。三个button的北京颜色全部设置成一个灰色（举例子） 3、...

jquery实现超简洁的TAB选项卡效果代码

01-19

本文实例讲述了jquery实现超简洁的TAB选项卡效果代码。分享给大家供大家参考。具体如下：这是一款超简洁的TAB选项卡，个人觉得有点太简单，简单的有点不习惯，美化修饰一下其实效果更好。实际上应该为点击过的TAB...

用javascript实现的不错的一款网页选项卡

10-30

### 使用JavaScript实现网页选项卡效果 #### 一、引言在现代网页设计中，选项卡（Tabs）是一种常见的交互式元素，它可以帮助用户更好地组织和浏览内容。本文将详细介绍如何使用JavaScript结合HTML和CSS来实现一个...

jQuery超简单选项卡完整实例

10-23

在本教程中，我们将探讨如何使用jQuery来实现一个超简单的选项卡功能。选项卡是网页设计中常见的交互元素，能够帮助用户以整洁、有组织的方式浏览和切换不同内容区域。以下是一个简化的jQuery选项卡实现步骤：首先...

js选项卡效果

Hermia_yuan的博客

03-27

1028

documentAPI： getElementById() 返回具有指定 ID 属性值的第一个对象的一个引用 getElementsByTagName 返回带有指定标签名的对象的集合,返回元素的顺序是它们在文档中的顺序。 getElementsByclassName属性设置或返回元素的 class 属性 <body>  <div class="box"> &lt...

js实现简单的选项卡~

Jackewe的博客

10-22

1862

##js做一个简易的选项卡 js联动太麻烦一个简单的选项卡给宁看首先是我的思路↓ 思路 a)先让所有隐藏,再让当前显示出来 b)涉及到一组一堆所有操作用 for循环 c) 循环里面加事件，事件里面i值不能用解决办法:在每一个元素身上添加一个i值接下来是style部分↓ #box button.ac{ ...

js实现简单选项卡制作

11-19

本文实例为大家分享了js实现简单选项卡制作代码，供大家参考，具体内容如下实现功能通过点击按钮查看相应的介绍；按钮相应的变色；内容相应的切换； html 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡</title> <link rel="stylesheet" href="./css/style.css" > </head> <bo

JS 实现选项卡

weixin_42468212的博客

08-20

217

CSS部分 <style> *{ margin: 0; padding: 0; outline: transparent; } #box{ width: 600px; margin: 100px auto; ...

js实现简单的选项卡

勾勾的博客

06-28

420

<!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:hove

JavaScript选项卡

YOUAFR的博客

10-09

310

*{ padding: 0;margin: 0;list-style: none; } #ul{ height: 20px; } #ul li{ float: left; width: 40px; height: 20px; } #smallbox{ width: 160px; height: 100px;

js 选项卡 实现方法

zc108511的博客

11-19

406

2.然后用querySelectorAll（）方法获取span元素和div元素，这样返回的是一个伪数组，所以要先循环给每一span绑定单击事件，然后再循环给每一个div和span添加一个空类名。当点击某选项的时候，后会先执行清空类名，然后把设置好样式的类名赋给当前点击的标签。

利用JS实现简单选项卡功能