ul列表選中變色效果
阿新 • • 發佈：2018-12-26
一： 先定義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;
} 二：實現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+")' 三：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>