动态添加class名，改变标签样式（包含鼠标移入、移出及点击事件）

柔光的暖阳◎ 2021-09-15 01:44 622阅读 0赞

1、常用的适用场景：多个超链接标签之间，通过点击实现页面跳转。

2、具体代码：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			* {
    				padding: 20px;
    				margin: 0;
    			}
    			
    			li {
    				width: 60px;
    				height: 10px;
    				border-radius: 10px;
    				list-style: none;
    				text-align: center;
    				line-height: 8px;
    				font-size: 30px;
    				margin-bottom: 10px;
    			}
    			/*鼠标移入样式改变*/
    			li:hover {
    				background-color: #2887f0;
    				color: #fff;
    			}
    			/*添加class=“active”之后的样式*/
    			.active {
    				background-color: #2887f0;
    				color: #fff;
    			}
    		</style>
    	</head>
    
    	<body>
    		<ul>
    			<li class="active">1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    			<li>5</li>
    			<li>6</li>
    			<li>7</li>
    			<li>8</li>
    			<li>9</li>
    			<li>10</li>
    		</ul>
    	</body>
    
    </html>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    	// 给所有的li绑定点击事件：1、删除所有的class名；2、对当前点击的li添加class=“active”。
    	$("li").click(function() {
    		$("li").removeClass();
    		$(this).addClass("active")
    	})
    </script>

3. 效果如下：

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，622人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 点击事件点击元素添加class，兄弟节点移除class

迎大家一起交流学习n(\*≧▽≦\*)n $("circle").on('click', 'li',function(){ $(this...

﹏ヽ暗。殇╰゛Y/ 2024年04月18日 18:27/ 0 赞/ 8 阅读

相关 jQuery学习笔记16-移入移出事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

Bertha 。/ 2024年04月17日 22:06/ 0 赞/ 14 阅读

相关 vue鼠标移入移除带动画事件实例

vue鼠标移入移除事件实例文章目录 vue鼠标移入移除事件实例效果图: 一. 技术分析二.实例的实现分析

爱被打了一巴掌/ 2022年11月29日 11:55/ 0 赞/ 349 阅读

相关页面鼠标移入移出、点击显示隐藏的处理

我们在页面开发中比较常见的功能是鼠标移入移出，或点击时，需要特定元素显示或隐藏的操作，实现方法很多，下面给出比较通用的方法注：需要页面引入jquery，这个不用多说。页

àì夳堔傛蜴生んèń/ 2022年11月05日 10:57/ 0 赞/ 196 阅读

相关 Vue中鼠标移入移出事件-解析

> 鼠标在li上移动也会触发移出事件两组鼠标事件 > mouseover 和 mouseout > mouseenter 和 mouseleave mous

你的名字/ 2022年09月10日 14:24/ 0 赞/ 245 阅读

相关鼠标的移入移出事件

一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmou

你的名字/ 2022年05月11日 23:58/ 0 赞/ 631 阅读

相关 javascript 鼠标移入移出改变图片透明度

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

青旅半醒/ 2021年11月22日 09:32/ 0 赞/ 337 阅读

相关 jquery移出，添加样式

$("browseImage").removeAttr('style'); $("browseImage").attr("style","border: 1px

╰+攻爆jí腚メ/ 2021年10月18日 21:48/ 0 赞/ 370 阅读

相关鼠标移入移出双击单击事件

qq交流群： 581478349 <!DOCTYPE html> <html> <head>

- 日理万妓/ 2021年09月18日 14:44/ 0 赞/ 353 阅读

相关动态添加class名，改变标签样式（包含鼠标移入、移出及点击事件）

1、常用的适用场景：多个超链接标签之间，通过点击实现页面跳转。 2、具体代码： <!DOCTYPE html> <html> <

柔光的暖阳◎/ 2021年09月15日 01:44/ 0 赞/ 623 阅读