首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >更改多个元素和一个元素的类

更改多个元素和一个元素的类
EN

Stack Overflow用户
提问于 2015-11-06 05:21:18
回答 1查看 20关注 0票数 0

在下面的代码中,我将执行以下操作:

  1. 获取“元素”(链接)中的所有子A标记; 变量链接= element.find("a");
  2. 查找Id位于A标记之一href中的所有Div(窗格); var窗格=links.map(函数() {返回$("#“+ this.href.split("#")1);});
  3. 单击其中一个链接时,我需要从所有窗格中删除类"active“,并将"active”类添加到ID与clickedLink.href.split("#")1相同的窗格中。 Links.bind(“单击”,函数(事件){ panes.not("id*=“+this.href.split(”#“)1).removeClass(”活动“);窗格(”#“+this.href.split(”#“)1).addClass(”活动“)};

我在(2)两个“窗格”上遇到问题.“代码行。

有人能告诉我怎么做吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-06 05:36:22

这样做的典型方法是:

  1. 从所有窗格中删除active
  2. 只要把它加回你想要的

您不需要在panes中为第二部分选择(语法不正确,但这并不重要);id在文档中是唯一的。所以:

代码语言:javascript
运行
AI代码解释
复制
links.bind("click", function (event) {    
  $.each(panes, function() { $(this).removeClass("active") });     
  $("#" + this.href.split("#")[1]).addClass("active");
});

代码语言:javascript
运行
AI代码解释
复制
var element = $(document.body);
var links = element.find("a");

var panes = links.map(function () { 
  return $("#" + this.href.split("#")[1]); 
});

console.log(panes);

links.bind("click", function (event) {         
  $.each(panes, function() { $(this).removeClass("active") });
  $("#" + this.href.split("#")[1]).addClass("active");
});
代码语言:javascript
运行
AI代码解释
复制
.active {
  background-color: red;
}
代码语言:javascript
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div01">div 01</div>
<div id="div02">div 02</div>
<div id="div03">div 03</div>
<div id="div04">div 04</div>
<div id="div05">div 05</div>

<a href="#div01">link to div 01</a>
<a href="#div02">link to div 02</a>
<a href="#div03">link to div 03</a>
<a href="#div04">link to div 04</a>
<a href="#div05">link to div 05</a>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33567791

复制
相关文章
如何更改伪元素的样式
在前端开发中我们会经常用到伪元素,有时候需要通过js来修改伪元素的样式,那么有哪几种方式来修改伪元素的样式呢?
挥刀北上
2021/01/27
9.4K0
如何更改伪元素的样式
盘点Arrays工具类中复制元素和填充元素的常用方法
在java的util包中提供了一个Arrays工具类用来操作数组的,它提供了许多的静态方法,例如数组所有元素进行排序,按从小到大的顺序、查找元素等。使用时需要导包如下所示:
Java进阶者
2021/08/20
7890
HTML的行元素和块元素
本博客所有文章如无特别注明均为原创。作者:十月梦想 ,复制或转载请以超链接形式注明转自 十月梦想博客 。 原文地址《HTML的行元素和块元素》
十月梦想
2018/08/29
3.3K0
CSS中的伪类和伪元素
伪类连同伪元素一起,他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(例如 :visited),同样的,可以根据内容的状态(例如在一些表单元素上的 :checked),或者鼠标的位置(例如 :hover 让你知道是否鼠标在一个元素上悬浮)来应用样式。
刘亦枫
2020/03/19
2.8K0
CSS中的伪类和伪元素
行内元素和块元素
标签的类型 块元素(block) 块元素特征 默认独占一行 没有给宽度的时候,宽度是auto,撑满一行(宽度就是父级的宽度) 支持所有的css命令 属于块元素标签的有 div,h1-h6,p,ul,li,ol,dl,dt,dd,header,nav,footer,section,article,aside 行内元素(inline) 行内元素的特征 内容撑开宽高,宽高的值都是auto,只不过显示出来的宽高是由内容撑开的 不支持设置宽高 不支持上下的margin和上下padding(左右支持),上下
友儿
2022/09/13
8320
关于伪类元素:before和:after
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:
bear_fish
2018/09/19
1K0
总结伪类和伪元素(转)
先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述:
山河木马
2019/03/05
1.5K0
总结伪类和伪元素(转)
CSS-伪类和伪元素
背景 写了这么多年代码,对CSS中的伪类和伪元素竟然没有细致的进行过学习总结,由此可见在实际代码开发中,用的也确实不多,也就用过一些:first-child,:hover之类的吧,其它的连before什么的都没用过,于是迫切需要大于伪元素与伪类进行一个系统整体的学习。 伪类和伪元素 伪类:是以一个冒号作为前缀,被添加到选择器的末尾,当你希望在特定状态下(:hover)才被呈现到指定元素时,可以往元素的选择器后面加上伪类。 伪元素:用于创建一些不在文档树中的元素,并为其添加样式。比如::befor
六个周
2022/10/28
1.1K0
行内元素、块级元素和行内块级元素的区别和联系
HTML,也叫“超文本标记语言”,其元素无非就是行内元素、块级元素和行内块级元素。
德顺
2023/08/25
6800
行内元素、块级元素和行内块级元素的区别和联系
行内元素和块级元素
HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSS的display属性相互转换。
WindRunnerMax
2020/08/27
1.2K0
CSS入门10-替换元素和非替换元素,块级元素和行内元素
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
1.8K0
多个扇形元素绕圆旋转
这种效果有很多方案,最后选择了一个比较简单的方案,就是一个position: relative;的 div 。包裹5个position: absolute;的div。 通过旋转,调整5个div的 top 与 left,而产生弧度,并使中心点都指向圆心。 黄色扇形与文字 都是在5个div内部。
拿我格子衫来
2023/10/19
2680
多个扇形元素绕圆旋转
显示组成一个图的多个元素的名称的分布。
import numpy as np import matplotlib.pyplot as plt from matplotlib.ticker import AutoMinorLocator, MultipleLocator, FuncFormatter np.random.seed(19680801) X = np.linspace(0.5, 3.5, 100) Y1 = 3+np.cos(X) Y2 = 1+np.cos(1+X/0.75)/2 Y3 = np.random.uniform(Y
裴来凡
2022/05/28
7580
显示组成一个图的多个元素的名称的分布。
通过css类/选择器选取元素 文档结构和遍历 元素树的文档
尽管如此,js还定义了一个方法,即一个getElementsByClassName(),是基于class属性值中的标识符来选取成组的文档元素
mySoul
2018/08/06
2K0
可替换元素和非替换元素
可替换元素replaced element也称作可置换元素,其展现效果不是由CSS来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。非置换元素non-replaced element也称作非替换元素,其内容由CSS渲染直接表现给客户端。
WindRunnerMax
2020/08/27
2K0
H5 新增的元素和废除的元素
section元素定义文档或应用程序的一个区域,如章节、页眉、页脚或文档中的其他部分,它可以与h1、h2、h3、h4、h5、h6等元素配合使用,标示文档结构。
week
2018/08/24
6120
HTML块级元素和行内元素
块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等, 其中<div>标签是最典型的块元素。 块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。 行内元素(inline-level) 行内元素(内联元素)不占有独立的区域,仅
秋白
2018/05/24
3.4K0
CSS 基础系列:伪类和伪元素
CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。
Chor
2019/11/07
2K0
重新认识伪类和伪元素
熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆(包括我)。那今天就让我们来看看伪类和伪元素的区别吧!
ihoey
2018/10/31
1K0
c++ vector删除多个元素方法
转自:https://blog.csdn.net/daofengdeba/article/details/7865229
用户7886150
2021/01/19
2.8K0

相似问题

同时更改多个元素的类

43

更改类的多个元素的类名

12

单击多个元素更改类(JavaScript)

11

具有多个元素的主干更改类

13

更改元素和类中元素的CSS

30
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文