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

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关鼠标的移入移出事件

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

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

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

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

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

相关 jquery移出，添加样式

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

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

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

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

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

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

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

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