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

柔光的暖阳◎ 2021-09-15 01:44 712阅读 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 条评论，712人围观）

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

相关阅读

相关 a标签添加鼠标移入移出的样式

<a href="javascript:void(0);" οnmοuseοver="this.style.color='blue';" οnmοuseοut="this.st

待我称王封你为后i/ 2023年07月13日 03:49/ 0 赞/ 35 阅读

相关 JavaScript——鼠标移入移出事件

onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover，它

àì夳堔傛蜴生んèń/ 2023年06月27日 04:25/ 0 赞/ 113 阅读

相关 1.2鼠标移入移出改变背景色和其他大小样式

功能：鼠标移入div,背景色变为绿色，宽变小，长变大，移出恢复原状事件：onmouseover,onmouseout 属性： background,width,heigh

ゝ一世哀愁。/ 2023年06月11日 10:21/ 0 赞/ 26 阅读

相关 CSS-鼠标移入一个标签改变另外一个标签的样式

鼠标移入改变样式，纯用CSS写应该要用到伪类hover 格式为 .ClassA：hover｛｝想做一个鼠标移入到一个标签改变另外一个个标签样式的模型原

迷南。/ 2023年06月03日 11:52/ 0 赞/ 17 阅读

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

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

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

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

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

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

相关鼠标的移入移出事件

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

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

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

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

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

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

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

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

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

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

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