ul列表选中变色效果

最新推荐文章于 2024-07-24 13:52:34 发布

紫木冰焰

最新推荐文章于 2024-07-24 13:52:34 发布

阅读量1.8w

点赞数 7

分类专栏： js html css 文章标签： js css javascript

本文链接：https://blog.csdn.net/yinkgh/article/details/52457575

版权

js 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

一：先定义css样式

<style type="text/css">

	.selectedCss{
	    background-color: #1E1E1E;
	    font-family: "微软雅黑";
	    font-size: 120%;
	    color: aquamarine;
	}

    .normalCss{
        background-color: darkgreen;
        font-family: "微软雅黑";
        font-size: 120%;
        color: aquamarine;
    }
</style>

二：实现js脚本

<script type="application/javascript">
	$(function(){
		generateLi();
	});

		

	//动态生成li，点击改变其他li颜色
	function generateLi(){
		for (var i = 0; i < 6; i++) {
			$("#jquery_genr")
				.append(
				"<li 
				id='li"+i+"' 
				class='normalCss' 
				onclick='changeColor2(this,"+i+")'>
				我是li_"+i+"
				</li>");
		}
	}
	
	//=================================//	
	//=========以下两个方法都可以实现========//
	//=================================//
	//只修改指定ul下的li列表
	function changeColor(obj){
		//改变所有li样式，寻找id为jquery_genr的ul元素的所有li元素
		$("ul[id=jquery_genr] >li")
			.removeClass()
			.addClass("normalCss");;
		//改变当前li样式
		$(obj).addClass("selectedCss");
	}
	
	//只修改指定ul下的li列表
	function changeColor2(obj,i){
		$(obj).removeClass().addClass("selectedCss");
		//选中id为li+i的元素的同胞元素（不包括自己）来修改样式
		$("ul[id=jquery_genr] > li[id=li"+i+"]")
			.siblings()
			.removeClass()
			.addClass("normalCss");
		
	}
	
</script>

三：html-body内容

<body>
	<font color="#CC3333" style="font-family: 微软雅黑">以下是加了选择事件的列表：</font><br/>
	<ul id="jquery_genr">
	</ul>
	
	<font color="#CC3333" style="font-family: 微软雅黑">以下是普通列表：</font><br/>
	<ul id="jquery_genr2" >
		<li class='normalCss'>我是li_0</li>
		<li class='normalCss'>我是li_1</li>
		<li class='normalCss'>我是li_2</li>
		<li class='normalCss'>我是li_3</li>
		<li class='normalCss'>我是li_4</li>
		<li class='normalCss'>我是li_5</li>
	</ul>
	
</body>

四：效果图

五：完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>指定ul下li列表选中效果</title>
		
		<script src="js/jquery-1.8.0.min.js" type="application/javascript"></script>
		
		<style type="text/css">
			
			.selectedCss{
				background-color: #1E1E1E;
				font-family: "微软雅黑";
				font-size: 120%;
				color: aquamarine;
			}
			
			.normalCss{
				background-color: darkgreen;
				font-family: "微软雅黑";
				font-size: 120%;
				color: aquamarine;
			}
		</style>
		
		<script type="application/javascript">
			$(function(){
				generateLi();
			});
			
			//动态生成li，点击改变其他li颜色
			function generateLi(){
				for (var i = 0; i < 6; i++) {
					$("#jquery_genr").append("<li id='li"+i+"' class='normalCss' onclick='changeColor2(this,"+i+")'>我是li_"+i+"</li>");
				}
			}
			
			//只修改指定ul下的li列表
			function changeColor(obj){
				//改变所有li样式，寻找id为jquery_genr的ul元素的所有li元素
				$("ul[id=jquery_genr] > li").removeClass().addClass("normalCss");;
				//改变当前li样式
				$(obj).addClass("selectedCss");
			}
			
			//只修改指定ul下的li列表
			function changeColor2(obj,i){
				$(obj).removeClass().addClass("selectedCss");
				//选中id为li+i的元素的同胞元素（不包括自己）来修改样式
				var objlis = $("ul[id=jquery_genr] > li[id=li"+i+"]").siblings();
				//改变其他li样式
				objlis.removeClass().addClass("normalCss");;
			}
			
		</script>
	
	
	</head>
	<body>
		<font color="#CC3333" style="font-family: 微软雅黑">以下是加了选择事件的列表：</font><br/>
		<ul id="jquery_genr">
		</ul>
		
		<font color="#CC3333" style="font-family: 微软雅黑">以下是普通列表：</font><br/>
		<ul id="jquery_genr2" >
			<li class='normalCss'>我是li_0</li>
			<li class='normalCss'>我是li_1</li>
			<li class='normalCss'>我是li_2</li>
			<li class='normalCss'>我是li_3</li>
			<li class='normalCss'>我是li_4</li>
			<li class='normalCss'>我是li_5</li>
		</ul>
	
	</body>
	
</html>