功能：對于一個ul中固定的li個數，當點擊其中一個li時，改變選中li的顏色；同時改變對應的另一個ul中li的顏色

頁面初始化的界面：

HTML：

其他推薦:

• 10:21
• 10:22
• 10:25
• 10:28
• 10:30

剩余紅包數:

• 200
• 150
• 100
• 50
• 20

在js中定義“其他事件”里面的li點擊事件，改變選中li的樣式(代碼用jquery寫的)：

// 設置選中的推薦的時間和紅包數的背景色和字體顏色

// 推薦的時間

var $recommend1 = $("#recommend1"),$recommend2 = $("#recommend2"),$recommend3 = $("#recommend3"),$recommend4 = $("#recommend4"),$recommend5 = $("#recommend5"),$num1 = $("#num1"),$num2 = $("#num2"),$num3 = $("#num3"),$num4 = $("#num4"),$num5 = $("#num5");

var times=new Array($recommend1,$recommend2,$recommend3,$recommend4,$recommend5);

var nums = new Array($num1,$num2,$num3,$num4,$num5);

// 添加Input選中背景色

$recommend1.click(function(){

setSelectedTime($recommend1,$num1);

});

$recommend2.click(function(){

setSelectedTime($recommend2,$num2);

});

$recommend3.click(function(){

setSelectedTime($recommend3,$num3);

});

$recommend4.click(function(){

setSelectedTime($recommend4,$num4);

});

$recommend5.click(function(){

setSelectedTime($recommend5,$num5);

});

function setSelectedTime(selectedTime,num){

if (selectedTime.hasClass('active1')){

//不處理

}else{

//遍歷數組把，其他的remove

for (var i = 0; i < times.length; i++) {

var time = times[i];

if (time.hasClass('active1')) {

time.removeClass('active1');

}

}

for (var i = 0; i < nums.length; i++) {

var n = nums[i];

if (n.hasClass('active2')) {

n.removeClass('active2');

}

}

//原來是沒有被選中的狀態

selectedTime.addClass('active1');

num.addClass('active2');

}

}思路如下：

1、定義times和nums數組，分別存放兩個ul的li；

2、給第一個ul中的每一個li定義點擊事件：

$recommend1.click(function(){

setSelectedTime($recommend1,$num1);

});

$recommend2.click(function(){

setSelectedTime($recommend2,$num3);

});

$recommend4.click(function(){

setSelectedTime($recommend4,$num4);

});

$recommend5.click(function(){

setSelectedTime($recommend5,$num5);

});3、定義點擊觸發事件所實現的功能函數：給選中的li添加樣式類

selectedTime表示第一個ul中的某個li的id，num表示第二個ul中對應的li的id

function setSelectedTime(selectedTime,num){

if (selectedTime.hasClass('active1')){

}else{

//遍歷數組把，其他的remove

for (var i = 0; i < times.length; i++) {

var time = times[i];

if (time.hasClass('active1')) {

time.removeClass('active1');

}

}

for (var i = 0; i < nums.length; i++) {

var n = nums[i];

if (n.hasClass('active2')) {

n.removeClass('active2');

}

}

//原來是沒有被選中的狀態

selectedTime.addClass('active1');

num.addClass('active2');

}

}

setSelectedTime()函數用來添加選中Li的樣式，其中在函數里面用到for循環來實現遍歷上次選中的Li,如果上次選中的li和當前選中的li不一樣，就要把上次選中的Li添加的類去掉，然后給當前選中的Li添加類樣式。

css部分樣式如下：

.active1{

background: #1FD823;

border: #1FD823;

}

.active2{

color: #1FD823;

}

點擊實現效果如下：

總結

如果覺得編程之家網站內容還不錯，歡迎將編程之家網站推薦給程序員好友。

本圖文內容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。

小編個人微信號 jb51ccc

喜歡與人分享編程技術與工作經驗，歡迎加入編程之家官方交流群！

總結

以上是生活随笔為你收集整理的html循环自动点击事件,js循环遍历ul中li的点击事件，给给选中li添加css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。