字体颜色切换当前变色其他恢复

天秤座_

于 2019-12-10 16:54:10 发布

阅读量222

点赞数

分类专栏：代码篇

本文链接：https://blog.csdn.net/weixin_44483523/article/details/103478717

版权

代码篇专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 2019 8：22：57 GMT"> -->
		<title></title>
		
		<style>
		.focus {color: blue;}
		.index{
			color: blue;
		}
		li{
			list-style: none;
			cursor: pointer;
		}
		#test li{
			float: left;
			margin-right: 20px;
		}
		#test li:hover{
			color:red;
		}
		</style>
	</head>
	<body>
		<ul id="test">
		    <li class="index">导航1</li>
			<li>导航2</li>
			<li>导航3</li>
			<li>导航4</li>
			<li>导航5</li>
			<li>导航6</li>
			<li>导航7</li>
		</ul>
		
	</body>
</html>
<script src="http://code.jquery.com/jquery-1.3.1.min.js"></script>
<script>
$(document).ready(function(){
    $('#test li').click(function(){
	console.log( $(this));
        if ($(this).hasClass('focus')) {
            return true;
        } else {
            $('#test li').removeClass('focus');
			$('#test li').removeClass('index');
            $(this).addClass('focus');
        }
    });
});
</script>

天秤座_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体颜色切换当前变色其他恢复

<!DOCTYPE html><html> <head> <meta charset="utf-8">  <title></title>...
复制链接

扫一扫