给一个ul列表中点击到的li赋予样式，并移除兄弟节点的此样式

no_waw

于 2022-04-28 17:45:34 发布

阅读量220

点赞数

分类专栏： CSS 文章标签： css3 jquery

原文链接：https://blog.csdn.net/weixin_44523860/article/details/108589148

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<div class="list-group" id="myList">
	<a href="#" class="list-group-item list-group-item-action" id = "letActive"> Cras justo odio </a>
	<a href="#" class="list-group-item list-group-item-action active">Dapibus ac facilisis in</a>
	<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
	<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
	<a href="#" class="list-group-item list-group-item-action " >Vestibulum at eros</a>
</div>

$(".list-group-item").click(function () {
	$(".list-group-item").siblings("a").removeClass("active");
	$(this).addClass("active");
});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

no_waw

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
给一个ul列表中点击到的li赋予样式，并移除兄弟节点的此样式

（小白学习笔记）给一个ul列表中点击到的li赋予样式，并移除兄弟节点的此样式
复制链接

扫一扫

专栏目录

关于jquery实现点击a链接，跳转之后，该a链接处样式的修改

a2072085745的专栏

09-10

1176

本来一般的列表标签都是直接给点击的li标签修改样式就可以了，直接用if判断语句就是可以的。但是有的时候项目是别人写的，要来进行bug修复之类的，或者在开发中遇到类似的问题都可以这样解决的，我就是在改别的项目遇到的问题一：遇到的问题：无法修改li标签的样式，页面刷新样式初始化这是项目原来的代码块 <ul class="new-list_header main " id="menu"> {dede:type typeid='2'}

如何在点击li时添加样式，移除兄弟样式

wjm0519的博客

07-31

625

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

对动态生成的ul-li进行点击事件并更改其样式

yangzixiansheng的博客

05-12

1282

1、点击动态的ul-li，给被点击的添加颜色 $(this).addClass(“active”).siblings().removeClass(“active”) ，siblings（）是监听除该元素的同级元素

怎样在点击li时添加样式，移除兄弟样式

chishui4094的博客

09-26

291

$(function(){ $("#sidebar ul li").click(function(){ $(this).addClass("active").siblings().removeClass("active"); }); }); ...

加载列表时jquery获取ul中第一个li的属性

10-25

本文将详细介绍如何利用jQuery技术，在加载列表时获取UL（无序列表）中的第一个LI（列表项）元素，并展示如何获取其属性、修改属性以及触发事件。首先，需要了解的是如何通过jQuery选择器定位到第一个LI元素。在此...

CSS中的ul与li样式详解共5页.pdf.zip

11-20

这份名为"CSS中的ul与li样式详解共5页.pdf.zip"的压缩文件很可能包含了关于如何使用CSS来定制这些列表元素样式的深入讲解。 `<ul>` 标签用于创建一个无序列表，通常显示为带有圆点或小方块的项目符号。这些列表可以...

css控制UL LI 的样式详解(推荐)

09-25

首先，`<ul>`标签用于创建一个无序列表，每个列表项由`<li>`标签包裹。在默认情况下，浏览器会为`<ul>`添加圆形的项目符号，而`<li>`则会有一定的内缩进。为了自定义这些样式，我们可以使用CSS来覆盖默认的样式规则...

css中使用ul li ul li ul li ul li 实现四层级联菜单

12-08

复制代码代码如下: <!DOCTYPE html PUBLIC “-//... <head> <title></title>...style type=”text/css”>... /*–a标签的默认颜色为黑色–*/ text-decoration:none; /*–隐藏超链接的下划线–*/ } a:

JQuery实现点击li标签改变样式class

热门推荐

qi_ming88的博客

03-06

2万+

本文主要介绍JQuery实现点击li标签改变样式class，即点击li标签会取消当前的样式，然后赋给点击的li的样式。思路：对所有的 li的标签添加点击事件，然后利用siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选，去除同辈的样式，然后在给当前点击的li标签添加样式。测试代码如下：<%@ page languag...

控制li 默认第一个是点击样式,点击其它li 又变回普通样式

ruixuefine的博客

02-08

2165

实现：第一个li我默认它是被点击后的样式，当我点击另一个的li后,点击的那个li为点击后的样式，第一个li和其它未被点击的li一样为普通的样式。 Vue 1.遍历出来，在click中赋值遍历出来的mx。 2.class进行决定是否显示，一点击就把对应的mx赋到activeName中 3.此时activeName就和mx一模一样的文本，然后返回一个true能显示当前的了 4.让第一个默认选中。就是把activeName放一个数值就行了 <template> <div id

JS中点击ul中的li，切换样式

weixin_42943920的博客

01-14

1552

// category ul的类名 // 所有li的点击事件，可都委托给ul category.addEventListener('click',e => { e = e || window.event; let target = e.target; // li标签及其内容 // 判断点击的对象是li if(target.nodeName === 'LI'){ // 切换类名 // ...category.children 是所有li的伪数组 // 可通过展开运

li点击添加选中样式

艾小逗

11-26

6716

li点击添加选中样式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;li选中&lt;/title&gt; &lt;sty

有多个li标签，每点击一个li标签改变被点击li标签的背景，并且获取改li标签中的数据

kiko.c的博客

06-11

2978

由于在做如下页面的布局时，采用了多个li标签来展现，需要达到的效果是： 1、每点击一个选项卡，该选项卡的背景颜色改变，再点击一次就变回本来的颜色 2、支持多选，并且把选中的选项卡数据存入数组主要用到的方法就是，取到所有的li标签进行循环添加点击事件，给当前点击的li标签添加一个className，给该className设置背景样式，但是由于本来的li标签有多个className，需要取...

循环li点击改变样式

夏夏

07-28

351

页面渲染： <ul> <li v-for="(item,i) in shishiTypes" :key="i" :class="i === li_active?'s_common top_left_li_act':'s_common top_left_li_default'" @click="setColor(i)"> <div style="font-size:14px"> <span>{{.

php给点击的li设置样式,css如何设置li的样式

weixin_34233974的博客

03-20

545

css设置li样式的方法：1、通过list-style-type属性定义li列表的项目符号；2、通过list-style-image属性实现使用图片代替项目符号；3、通过list-style属性综合设置li样式即可。本教程操作环境：windows7系统、css3版本、Dell G3电脑。li标签默认样式是前面有一个小圆点或者是数字序号，那么怎样改变li标签的默认样式呢？css怎么设置li标签的样式...

html中li点击之后的样式,CSS - HTML：如何样式li标签。 1 li标签然后2直接在

weixin_42480540的博客

06-16

812

我已经有很多尝试尝试实现这一点。我正试图在两条独立的线上实现3个li标签。在第一行1 li标签和正下方的2 li标签在一行上。CSS - HTML：如何样式li标签。 1 li标签然后2直接在这就是我想实现：这是我目前有： HTMLC-Panel | Logout CSSsection#logout{font-family: AmsiPro-XLight;float:right;padding...

Bootstrap list-group-item获取值

春华秋实

05-16

2433

Bootstrap 中的list-group用jquery获取list-group-item值 $(".list-group-item").on("click", function(){ $(".list-group-item").removeClass("active"); var childs=this.children; $(this).addClass("acti...

记录一下取ul中li的值

bailin2016的博客

08-27

302

//#id 事件 $('#onLineUser').on('click','li',function () { $(".list-group-item").removeClass("active"); $(this).addClass("active"); document.getElementById("lobby").innerText=this.in...

怎么让ul第一个li的初始样式是鼠标悬浮的样式