li点击增加active效果

最新推荐文章于 2023-02-13 20:07:02 发布
最新推荐文章于 2023-02-13 20:07:02 发布
阅读量8.8k 收藏 5
点赞数 3
分类专栏： html vue 文章标签： li添加active
vue 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
html
15 篇文章 0 订阅
订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>选项卡实现原理</title>
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<style type="text/css">
    .wrap{width: 300px;list-style: none;}
    .wrap li{height: 50px;margin:1px;}
    .active{font-weight:bold; background-color: pink; color:#fff;}
</style>
</head>
<body>
<ul class="wrap">
    <li class="active">apple</li>
    <li>pear</li>
    <li>banana</li>
</ul>
<script type="text/javascript">
$(function(){
    $(".wrap li").click(function() {
        $(this).siblings('li').removeClass('active');  // 删除其兄弟元素的样式
        $(this).addClass('active');                    // 为点击元素添加类名
    });
}); 
</script>
</body>
</html>

转载：https://blog.csdn.net/pink789/article/details/83049118

TCancel
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html li.active,HTML新手求解。关于CSS对于li标签的active状态的背景颜色_html/css_WEB-ITnose...
weixin_42228796的博客
06-22 837
后能得到不同的背景颜色不好意思了大神，我感觉代码不多，所以直接贴了。。回复讨论(解决方案).test #ul li.active{ background:#.... }.test #ul li a{ disaplay:inline-block; background:#....}.test #ul li a:active{ background:#.... }.test #ul li.active...
li 左右淡入淡出效果图片
06-03
当用户触发切换（比如点击上一页或下一页按钮）时，隐藏的`li`元素的`opacity`从0逐渐增加到1，同时当前显示的`li`元素的`opacity`从1减小到0。如果使用`display`属性，可以先将一个元素设置为`none`（不显示），...
点击li标签添加active效果
芃蓉蓁蓁的博客
06-01 3015
// li标签点击添加active效果 $("ul li").click(function() { $(this).siblings('li').removeClass('active'); // 删除其兄弟元素的样式 $(this).addClass('active'); // 为点击元素添加样式 });
超简单点击li背景变色
qq_29167197的博客
05-23 1万+
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;style&gt; *{margin: 0;padd
html li active点击,vue2.0中click点击当前li实现动态切换class
weixin_29189377的博客
07-01 389
1，文件内容----//为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法。 看详解：https://cn.vuejs.org/v2/api/#Vue-set{{item.select}}当我是图标import Vue from 'vue'export default{data(){return {active: false,items...
li列表中包超链接，使得用户选中的超链接是active状态，其他超链是非active状态
以家为家，以乡为乡，以国为国，以天下为天下
03-11 7285
<div class="span3"> <ul class="nav nav-pills nav-stacked"> <li><a href="#" id="uploadFile">上传文件(WORD)</a></li> <li><a href="#" id="rawCorpus">生语料(TXT)</a></li> <li><a href="#" id
vue---给li标签设置active选中样式
maidu_xbd的博客
06-24 4490
关键点：添加【:class="active==index?'isActive':''"】 具体见下图： 在data中，设置active初始值为-1【active:-1】
前端JavaScript实现菜单栏点击变化效果
12-18
我们可以使用伪类`:hover`和`:active`来实现简单的高亮效果，同时，可以利用CSS动画库如Animate.css或者自定义动画来增加复杂的效果： ```css #menuBar ul li a { display: block; padding: 10px; text-...
jQuery点击图标菜单图文切换特效代码
03-20
最后，为了让用户更容易识别可点击的图标，我们还可以增加一些视觉反馈，如鼠标悬停时的样式变化，或者图标点击后的高亮效果。这可以通过CSS伪类`:hover`和`.active`来实现。 总结，通过使用jQuery，我们可以轻松...
JS实现选项卡效果的代码实例
10-16
通过循环，为每个`<li>`添加点击事件，当点击某个选项时，首先遍历所有`<li>`和`<div>`，清除所有`<li>`的`active`类并隐藏所有内容`<div>`。接着，将当前点击的`<li>`添加`active`类，显示与其对应索引的`<div>`。 ...
jquery实现的可增加关闭的tab标签效果
06-10
本文将深入探讨如何使用jQuery实现一个可动态增加和关闭的tab标签效果，这种功能在网页应用中非常常见，如设置面板、多文档界面等。 首先，我们从基础开始。Tab标签通常是网页设计中用来组织和展示内容的一种方式，...
Activity中onClick事件3种写法
wyw1213的专栏
03-27 6932
Java文件package com.wyw.demo; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; public class activity extends Activity { /** Called when the activit
javascript获取li列表中有active标签的序列号
清淡描写的博客
12-06 1万+
javascript获取li列表中有active标签的序列号 Author:[前进的大牛] 代码块代码块语法遵循标准markdown代码，例如： **需要引入jquery文件** ------------HTML代码: <ul> <li>1</li> <li c
JS:页内元素实现点击切换相关元素内容--不用vue一样可以实现active class
aDiligentCigarette的博客
06-02 793
有
CSS中选择器种类详解和优先级
铭小小
03-04 1112
CSS三大特性——继承、 优先级和层叠。 继承：即子类元素继承父类的样式; 优先级：是指不同类别样式的权重比较; 层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。 css选择符分类　　 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(div) 2.id选择器(#ka) 3.类选择器(.ka) 4.后代选择器（ul li） 5.子代选择器（ul&gt...
css 给li标签点击之后会有背景
weixin_42584758的博客
02-13 719
可以使用 CSS 的 :active 伪类来实现点击 li 标签后背景的变化。 示例代码如下： li:active { background-color: #ddd; } 这样，当用户点击 li 标签时，背景颜色会变成 #ddd。 ...
移动端:active伪类无效的解决方法
热门推荐
freshlover的专栏
02-11 4万+
：active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。 该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。 说到：active伪类就不得
点击的li显示并为他增加类active，其他的li消失并去除类名，实现选项卡效果
是喵喵酱呀！
10-14 7534
记得引入jquery库 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;选项卡实现原理&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery.1.4.2-min.js"&gt;&lt;/script&gt; &
let tabName=document.querySelector("#tabNav");//获取tabNav选择器 赋值给tabName /* console.log(tabName); */ let lis=tabName.querySelectorAll("li");//获取tabName中所有的li let items=document.querySelectorAll(".item");//获取item选择器 //items.forEach(value=>console.log(value));//测试是否获取到该选择器 for(let i=0;i<lis.length;i++){//遍历数组tabnav中的li lis[i].onclick=function(){//给i索引的li增加点击触发事件 lis.forEach(value=>{value.className='';});//给所有li的样式设为空，即取消原有样式 lis[i].className='active';//把当前遍历到的li设置为active样式 items.forEach(value=>{value.className='item'});//设置点击的时候item内容都隐藏 items[i].className='item show';//设置该遍历的索引显示该内容 } }什么意思
最新发布
05-19
当某个 li 元素被点击时，先将所有 li 元素的样式设为空，然后将当前被点击的 li 元素设置为 active 样式。接着，将所有 item 内容都隐藏，并将当前遍历到的索引对应的 item 显示出来。这样就实现了一个简单的选项卡...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值