求助，这个需求js如何实现

HelloBeane 2018-08-31 10:40:16


用js如何实现鼠标放在“第一个”标签的时候，第一个标签颜色变为红色，鼠标离开时保留红色，鼠标放在“第二个”标签的时候，第二个标签颜色变红，其他标签颜色恢复到黑色，鼠标离开时保留红色……

...全文
162 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
weixin_43106027 2018-08-31
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>biubiubiu~</title>

		<script type="text/javascript" src="js/jquery.js" ></script>

		<style>

			body{

				margin: 0;

				padding: 0;

				background-color: bisque;

			}

			.content{

				padding: 100px 200px;

				background-color: #999999;

			}

			.e{

				border: 1px solid #fff;

			}

			ul{

				padding: 0;

				margin: 0;

			}

			li{

				list-style: none;

				display: inline-block;

				font-size: 20px;

				line-height: 50px;

				padding: 0 50px;

				

			}

			i{

				border: 1px solid pink;

			}

			.clicked{

				color: red;

			}

		</style>

	</head>

	<body>

		<div class="content">

			<div class="e">

				<ul>

					<li class="first">第一个</li>

					<i></i>

					<li class="second">第二个</li>

					<i></i>

					<li class="third">第三个</li>

				</ul>

			</div>

		</div>

	</body>

	<script>

		$(function(){

			$(".first").click(function(){

				$(this).addClass("clicked");

				$(".second").removeClass("clicked");

				$(".third").removeClass("clicked");

			});

			$(".second").click(function(){

				$(this).addClass("clicked");

				$(".first").removeClass("clicked");

				$(".third").removeClass("clicked");

			});

			$(".third").click(function(){

				$(this).addClass("clicked");

				$(".second").removeClass("clicked");

				$(".first").removeClass("clicked");

			});

		});

	</script>

</html>
weixin_43106027 2018-08-31
  • 打赏
  • 举报
 回复
[code=html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>biubiubiu~</title>
<script type="text/javascript" src="js/jquery.js" ></script>
<style>
body{
margin: 0;
padding: 0;
background-color: bisque;
}
.content{
padding: 100px 200px;
background-color: #999999;
}
.e{
border: 1px solid #fff;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
display: inline-block;
font-size: 20px;
line-height: 50px;
padding: 0 50px;

}
i{
border: 1px solid pink;
}
.clicked{
color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="e">
<ul>
<li class="first">第一个</li>
<i></i>
<li class="second">第二个</li>
<i></i>
<li class="third">第三个</li>
</ul>
</div>
</div>
</body>
<script>
$(function(){
$(".first").click(function(){
$(this).addClass("clicked");
$(".second").removeClass("clicked");
$(".third").removeClass("clicked");
});
$(".second").click(function(){
$(this).addClass("clicked");
$(".first").removeClass("clicked");
$(".third").removeClass("clicked");
});
$(".third").click(function(){
$(this).addClass("clicked");
$(".second").removeClass("clicked");
$(".first").removeClass("clicked");
});
});
</script>
</html>
][/code]
weixin_43106027 2018-08-31
  • 打赏
  • 举报
 回复
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>biubiubiu~</title>
<script type="text/javascript" src="js/jquery.js" ></script>
<style>
body{
margin: 0;
padding: 0;
background-color: bisque;
}
.content{
padding: 100px 200px;
background-color: #999999;
}
.e{
border: 1px solid #fff;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
display: inline-block;
font-size: 20px;
line-height: 50px;
padding: 0 50px;

}
i{
border: 1px solid pink;
}
.clicked{
color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="e">
<ul>
<li class="first">第一个</li>
<i></i>
<li class="second">第二个</li>
<i></i>
<li class="third">第三个</li>
</ul>
</div>
</div>
</body>
<script>
$(function(){
$(".first").click(function(){
$(this).addClass("clicked");
$(".second").removeClass("clicked");
$(".third").removeClass("clicked");
});
$(".second").click(function(){
$(this).addClass("clicked");
$(".first").removeClass("clicked");
$(".third").removeClass("clicked");
});
$(".third").click(function(){
$(this).addClass("clicked");
$(".second").removeClass("clicked");
$(".first").removeClass("clicked");
});
});
</script>
</html>
HelloBeane 2018-08-31
  • 打赏
  • 举报
 回复
引用 7 楼 jslang 的回复:


<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

.select {

	color: red;

}

</style>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	$("#menu span").mouseenter(function(event){

		$(this).addClass("select").siblings().removeClass("select");

	});

});

</script>

</head>

<body>

<div id="menu">

	<span>第一个</span>|<span>第二个</span>|<span>第三个</span>

</div>

</body>

</html>


谢谢
天际的海浪 2018-08-31
  • 打赏
  • 举报
 回复 


<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

<style type="text/css">

.select {

	color: red;

}

</style>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	$("#menu span").mouseenter(function(event){

		$(this).addClass("select").siblings().removeClass("select");

	});

});

</script>

</head>

<body>

<div id="menu">

	<span>第一个</span>|<span>第二个</span>|<span>第三个</span>

</div>

</body>

</html>
Logerlink 2018-08-31
  • 打赏
  • 举报
 回复
那 这样吧


<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			ul li{list-style: none;float: left;position: relative;padding: 10px;}

			ul li:after{content: "|";position: absolute;right: 0;}

			/*ul li:hover span{color: red;}*/   

		</style>

		<script>

			window.onload = function(){

				let lastLi ; 

				let ulDom = document.getElementsByClassName('nav-bar')[0];

				console.log(ulDom)

				ulDom.childNodes.forEach(li=>{

				li.onmouseover = function(){

					if(lastLi !== li && lastLi !== undefined){

					lastLi.style.color = 'black';

					}

					li.style.color = 'red'

					lastLi = li

				}

				li.onmouseout = function(){

					

				}

			})

			}

		</script>

	</head>

	<body>

		<nav>

			<ul class="nav-bar">

				<li><span>第一个</span></li>

				<li><span>第二个</span></li>

				<li><span>第三个</span></li>

			</ul>

		</nav>

	</body>

</html>
HelloBeane 2018-08-31
  • 打赏
  • 举报
 回复
引用 3 楼 Logerlink 的回复:
纯js做要写很多东西 如果只是状态的变化 可以用这个


<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			ul li{list-style: none;float: left;position: relative;padding: 10px;}

			ul li:after{content: "|";position: absolute;right: 0;}

			ul li:hover span{color: red;}

		</style>

	</head>

	<body>

		<nav>

			<ul class="nav-bar">

				<li><span>第一个</span></li>

				<li><span>第二个</span></li>

				<li><span>第三个</span></li>

			</ul>

		</nav>

	</body>

</html>


谢谢，不过，我的意思是鼠标移出后颜色还保留为红色，当鼠标移入到另一个标签时，被移入的是红色，其他为黑色，是个切换的效果
Logerlink 2018-08-31
  • 打赏
  • 举报
 回复
纯js做要写很多东西 如果只是状态的变化 可以用这个


<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			ul li{list-style: none;float: left;position: relative;padding: 10px;}

			ul li:after{content: "|";position: absolute;right: 0;}

			ul li:hover span{color: red;}

		</style>

	</head>

	<body>

		<nav>

			<ul class="nav-bar">

				<li><span>第一个</span></li>

				<li><span>第二个</span></li>

				<li><span>第三个</span></li>

			</ul>

		</nav>

	</body>

</html>
xiaolong_94 2018-08-31
  • 打赏
  • 举报
 回复

你要的js实现，建议用css来做，css能做的效果尽量不要用js写
HelloBeane 2018-08-31
  • 打赏
  • 举报
 回复
引用 1 楼 caishu1995 的回复:
给每个标签绑定onmouseover onmouseout两个事件。鼠标移入改颜色为红色，鼠标移出改为黑色
不过如果只是这种简单的操作，建议使用css的 :hover，css能解决的就尽量不要使用js


谢谢，不过，我的意思是鼠标移出后颜色还保留为红色，当鼠标移入到另一个标签时，被移入的是红色，其他为黑色，是个切换的效果
彩舒 2018-08-31
  • 打赏
  • 举报
 回复
给每个标签绑定onmouseover onmouseout两个事件。鼠标移入改颜色为红色，鼠标移出改为黑色
不过如果只是这种简单的操作，建议使用css的 :hover，css能解决的就尽量不要使用js
点击图片后变大的JS(仿腾讯)
用法非常简单，开发者可用 源码一看就懂,兼容所有IE 页面上只要是图片你都可以以点就变 不多吹咯
基于JSP技术的健康信息网站的设计与实现 论文.docx
基于JSP技术的健康信息网站的设计与实现 论文
Merchantjs一个用于创建idle游戏的Javascript框架
Merchant.js 一个用于创建idle游戏的Javascript框架
基于web的老年活动中心管理系统的设计与实现(论文+源码)_kaic.zip
基于web的老年活动中心管理系统的设计与实现(论文+源码)_kaic.zip
vue-基于Spring Boot 社区助老志愿者服务平台的设计与实现论文+答辩ppt.rar
vue-基于Spring Boot 社区助老志愿者服务平台的设计与实现论文+答辩ppt
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章