用原生js写个class切换

最新推荐文章于 2024-08-29 14:50:15 发布
最新推荐文章于 2024-08-29 14:50:15 发布
阅读量6.5k 收藏 1
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013247277/article/details/70598971
版权
这篇博客演示了如何使用原生JavaScript为HTML元素添加点击事件，实现点击后切换class的效果。通过获取ID为'toggle'的div内的所有子div，并为每个子元素添加点击事件监听器，当点击某元素时，移除所有兄弟元素的'blue'类，将被点击元素的类设置为'blue'，从而改变背景颜色。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no,email=no" name="format-detection">
<meta content="yes" name="apple-touch-fullscreen">
<title></title>
<style>
*{margin:0;padding:0;}
#toggle{
最低0.47元/天 解锁文章
一_介_布_衣
关注
专栏目录
使用原生js实现多选，取消选中，以及动态切换class
qq_45018844的博客
12-06 4153
效果图 多选效果的实现 <view class="item" :class="isActiveFn(item)?'active':''" v-for="(item,index) in list" :key="index" @click="getItem(item)"> {{item.name}} </view> 点击某个块通过getItem拿到值 this.listCustom是下面那个添加的框的list getItem(item) { //判断已经是否添加过
js切换换class
林育松
05-20 993
1， function ntabs(thisObj,Num)             {if(thisObj.className == "active")return;               var tabObj = thisObj.parentNode.id;               var tabList = document.getElementById(tabOb
JS中的class
最新发布
be willing to share
08-29 488
在这个例子中，Dog 类继承了 Animal 类，并且重写了 speak() 方法。在这个例子中，#socialSecurityNumber 是一个私有字段，不能在类的外部直接访问，只能通过类内部的方法访问。私有字段和方法只能在类的内部访问，外部无法直接访问。使用 class 关键字定义一个类，类中通常包含构造函数 (constructor)，以及其他方法和属性。class 关键字也支持继承，允许一个类继承另一个类的属性和方法。使用 static 关键字定义静态方法，静态方法属于类本身，而不是类的实例。
tab切换，原生js
qq_45952585的博客
11-19 511
tab切换，原生js第一种方式第二种方式 第一种方式 <style> * { padding: 0; margin: 0; } .big { width: 900px; height: 600px; margin: 0 auto; } ul { list-sty
使用js中class类制作一个tab栏切换
qq_52648305的博客
04-12 613
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、tab切换栏具有什么作用?二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 在 ES6 规范中，引入了 class 的概念。相较于es5中原型的写法,继承上的差异 相比之下,更建议后者的class写法,更加符合面向对象编程思想。 提示：以下是本篇文章正文内容，下面案例可供参考 一、tab切换栏具有什么作用? 功能具有添加,删除,切换,更改标题和文本值,图示如下: 二、使用步骤 1.
原生js如何切换一个元素的类?
高先生的猫
03-18 1323
const toggleClass = (el, className) => el.classList.toggle(className) // 事例 移除 p 具有类`special`的 special 类 toggleClass(document.querySelector('p.special'), 'special')
原生js简单的Tab选项卡切换支持多个静态选项卡切换代码
11-22
本篇主要介绍如何使用原生JavaScript实现一个简单的Tab选项卡切换功能，支持多个静态选项卡的切换。 首先，我们需要理解HTML结构。在创建Tab选项卡时，通常会有两部分：一个是选项卡的标题（`<button>`或`<a>`标签...
原生javascript图片自动或手动切换示例附演示
10-26
在本文中，我们将深入探讨如何使用原生JavaScript实现图片自动或手动切换的焦点图功能。这个功能在网页设计中非常常见，例如在产品展示、新闻轮播等场景下。我们将通过分析提供的HTML代码和JavaScript源代码来理解其...
原生js轮播图自动切换代码
04-25
例如，使用`display: none`隐藏除第一个图片外的所有图片，然后通过JavaScript切换显示的图片。 ```css .carousel-items > img { display: none; } .carousel-items > img:first-child { display: block; } ``` ...
JavaScript原生切换效果
qq_44017357的博客
11-27 188
<div id="mingdiantu"> <div class="mingdiantu_nei"> <div class="mingdiantu_nei_top"> <div class="mingnei_ren left"> <img src="img/mingdian_01.jpg"/> </div> <div class="mingnei_biao right"&gt
原生js实现对class的增删改
coder丶东的博客
09-23 3212
在忙碌了一个星期之后，今天终于有了空闲时间，决定把这一周来遇到的问题和学习到的知识通过写博客的形式记录下来，一是为了加深印象，二是当一个记录，方便以后查看。本萌新还是只小猴子，本文有什么欠缺或者另有高见的，请指教。现场还原在h5混合开发APP的项目中，没有引用jQuery第三方js库，很多对节点的操作需要通过js原生来实现，对于一只刚进公司的菜鸟的我来说是一件头大的事情，T T，在看了网上一些方法之
原生js对类名的操作
jier_jier的博客
05-22 885
原生js对类名的操作 今天做一个demo的时候，忽然忘记了对Dom节点的类名操作，想记录下来，让自己能记忆更深刻一些。 语法 添加类名：Dom.classList.add(classname) 移除类名：Dom.classList.remove(classname) 切换类名：Dom.classList.toggle(classname) code示例 html: <button id="change_red">变为红类</button> <button id="change_
如何使用 JavaScript 更改元素的类？
kalman2019的博客
12-21 2088
如何使用 JavaScript 更改 HTML 元素的类以响应 onclick 或任何其他事件？
JS实现--按钮切换（简单）
qq_42777804的博客
09-23 2664
这种东西真的是看着简单，刚学习的时候比较困难 这里其实进行了点击操作，但是gif给弄得有点快 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
Js 和 Jq 添加类、删除类 和 切换类
weixin_52306994的博客
03-11 1013
setAttribute()方法是创建或者改变元素的某个属性el.setAttribute("class","classname")不仅可以使用classList.toggle()方法在修改切换类，也可以使用setAttribute()方法。看了这些，小伙伴是不是有这样的疑惑呢？怎样才能兼容所有浏览器呢。$(当前对象). addClass("类名")
js中事件的应用：点击张开或切换
weixin_45555153的博客
07-13 356
【代码】js中事件的应用：点击张开或切换。
ES6中的class和export的用法
u013994400的博客
04-27 3162
1、class 的用法 ES6中的Class用法类似Java的Class用法，但class的本质是js一个function //定义类 class Person { //定义构造方法 constructor(name, age){ console.log("父类构造方法") this.name = name; this.age = age; } getInfo(){ return `姓名：${this.name}
用原生JS写一个轮播图
09-26
### 回答1： 我可以提供一些指导，但这取决于你有多少 JavaScript 经验。首先，你需要准备一组图片，然后为每张图片创建一个<img>元素。接下来，你需要创建一个 JavaScript 函数来控制图片的显示和隐藏，以及设置一个定时器来自动触发图片切换动作。最后，你可以添加一些按钮来控制轮播图的播放和暂停。 ### 回答2： 轮播图是网页中常见的一种展示多张图片或者内容的效果，下面是使用原生JS编写的一个简单轮播图的示例： HTML结构： ```html <div class="slider"> <ul class="slider-list"> <li><img src="image1.jpg" alt="image1"></li> <li><img src="image2.jpg" alt="image2"></li> <li><img src="image3.jpg" alt="image3"></li> </ul> <button class="prev-btn">上一页</button> <button class="next-btn">下一页</button> </div> ``` CSS样式： ```css .slider { position: relative; width: 400px; height: 300px; overflow: hidden; } .slider-list { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; display: flex; transition: all 0.5s ease-in-out; } .slider-list li { flex: 0 0 100%; } .prev-btn, .next-btn { position: absolute; top: 50%; transform: translateY(-50%); } .prev-btn { left: 10px; } .next-btn { right: 10px; } ``` JavaScript代码： ```javascript window.addEventListener("load", function() { var sliderList = document.querySelector(".slider-list"); var prevBtn = document.querySelector(".prev-btn"); var nextBtn = document.querySelector(".next-btn"); var imageWidth = sliderList.firstElementChild.clientWidth; var currentImageIndex = 0; nextBtn.addEventListener("click", function() { if (currentImageIndex < sliderList.children.length - 1) { currentImageIndex++; var translateXValue = -currentImageIndex * imageWidth; sliderList.style.transform = "translateX(" + translateXValue + "px)"; } }); prevBtn.addEventListener("click", function() { if (currentImageIndex > 0) { currentImageIndex--; var translateXValue = -currentImageIndex * imageWidth; sliderList.style.transform = "translateX(" + translateXValue + "px)"; } }); }); ``` 以上代码实现了一个简单的轮播图，点击“上一页”和“下一页”按钮可以切换图片。代码通过监听按钮的点击事件，在点击事件中改变轮播图的`translateX`属性来实现滑动效果。 ### 回答3： 轮播图是网页中常见的组件之一，可以用来展示多张图片或内容的切换效果。下面是用原生JS写一个简单的轮播图的步骤： 1. HTML结构： 首先，在HTML中创建一个包含轮播图的容器，用来展示图片。可以使用`<div>`元素，并为其设置一个唯一的id，例如`<div id="slider">`。在容器内部，创建一个`<ul>`元素，并为其添加一个唯一的id，例如`<ul id="slider-list">`。然后，再在`<ul>`中创建多个`<li>`元素，每个`<li>`元素代表一个要展示的图片或内容。 2. CSS样式： 使用CSS样式来设置轮播图容器`<div>`和内部的`<ul>`元素的样式，例如设置宽度、高度、背景色等。还可以设置`<li>`元素的样式，例如设置宽度、高度、定位等，来控制图片或内容的展示方式。 3. JS逻辑： 使用原生JS来实现轮播图的逻辑部分。 - 首先，获取轮播图容器和内部`<ul>`元素的引用，可以使用`document.getElementById()`方法获取元素的引用。 - 获取所有的`<li>`元素的引用，并存储在一个数组中。 - 定义变量来存储当前展示的图片的索引，默认为0。 - 定义一个函数来切换图片。可以使用`style.display`属性来控制`<li>`元素的显示或隐藏状态。切换到下一张图片时，将当前展示的图片隐藏，将下一张图片显示。切换到最后一张图片时，再切换到第一张图片。 - 使用`setInterval()`函数来定时调用切换图片的函数，实现自动播放的效果。 4. 绑定事件： 可以为轮播图容器添加鼠标移入和移出的事件，分别停止和开始自动播放。 以上是用原生JS实现一个简单的轮播图的大致步骤，通过编写、测试和调试代码，可以使轮播图正常运行并展示多张图片或内容的切换效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值