現在有這麼一個實例要求：
1）畫出五個盒子，分別用紅色、紫色、橘子、綠色、藍色字體顏色來表示；
## 2）滑鼠點選其中當一個盒子時，邊框加粗並顯示與盒子字體顏色一致的顏色； 效果如下圖：
## 以下是具體的實作想法：
一、html內容建構先利用html內容表達五個盒子內容，程式碼如下：
<ul id='levelGroup'>
<li id='level1' >红</li>
<li id='level2' >紫</li>
<li id='level3' >橙</li>
<li id='level4' >绿</li>
<li id='level5' >蓝</li>
</ul>二、原始樣式實現
利用css來表達上述需求1的樣式需求，css程式碼如下：
body{
font-size: 10px;
}
#levelGroup{
list-style: none;
border: 1px solid gray;
height: 40px;
width: 200px;
overflow: hidden;
padding: 10px;
}
#level1{
border: 1px solid gray;
width: 20px;
height: 20px;
float: left;
color: red;
margin-right: 5px;
text-align: center;
padding-top: 5px;
}
#level2{
border: 1px solid gray;
width: 20px;
height: 20px;
float: left;
color: purple;
margin-right: 5px;
text-align: center;
padding-top: 5px;
}
#level3{
border: 1px solid gray;
width: 20px;
height: 20px;
float: left;
color: orange;
margin-right: 5px;
text-align: center;
padding-top: 5px;
}
#level4{
border: 1px solid gray;
width: 20px;
height: 20px;
float: left;
color: green;
margin-right: 5px;
text-align: center;
padding-top: 5px;
}
#level5{
border: 1px solid gray;
width: 20px;
height: 20px;
float: left;
color: blue;
margin-right: 5px;
text-align: center;
padding-top: 5px;
}可完成圖1的至此可以完成圖1的效果。
三、互動樣式實現接下來透過分析需求2，我們發現只要在點選每個li元素時，為此元素賦予一個線框加粗而且顏色改變的樣式即可實現。那麼如何加入樣式呢，通常我們的做法就是為每個li添加一個class（類別）屬性，並設定該class的css樣式（邊框加粗、顏色改變），具體css程式碼如下：
.level1_selected{
border: 2px solid red !important;
}
.level2_selected{
border: 2px solid purple !important;
}
.level3_selected{
border: 2px solid orange !important;
}
.level4_selected{
border: 2px solid green !important;
}
.level5_selected{
border: 2px solid blue !important;
}接著，利用js控制互動樣式的程式碼如下：
$("#levelGroup li").click(function()
//首先获取该元素的索引
var index = $(this).index();
//接着为该li添加相应的css交互样式
var para_index = index+1;
$(this).addClass("level"+para_index+"_selected");
//同时也要将其他li元素的样式还原为初始状态
$("#levelGroup li").each(function(){
var curIndex = $(this).index();
if(curIndex !=index){
curIndex = curIndex+1;
$(this).removeClass("level"+curIndex+"_selected");
}
});});
最終實現的效果如圖2所示：
圖（22）互動效果圖（22）交互效果圖a #四、程式碼最佳化
問題：透過觀察上面程式碼的實作方式，讀者可能很快就會發現一個問題：js中的程式碼操作繁瑣，還要遍歷，整體效率低
。分析：那麼如何改善與最佳化呢？透過分析我們發現，js中的程式碼之所以複雜，是因為每個li元素的需求1原始樣式由id控制，如＃level1｛......｝，而需求2的交互樣式由class屬性控制，如.level1_selected{......},，而且每個li元素的原始樣式和交互樣式都不一樣，所以造成交互時必須進行索引定位和遍歷實現樣式的改變。
解決方法：既然是css樣式設定方式的問題，那麼如何設計改變呢，其實這裡我們可以遵循這樣一個理念：盡量少的去增加新的控制類，以減少後續的js操作。
例如上述的方法就是在需求2的解決方法中為每個li增加了一個“選中類別”，如類別level1_selected、類別level2_selected......。這裡理想的解決方法是只增加一個類別selected，但是selected類別要透過與每個li的id結合使用，從而保證每個selected類別的具有不同樣式。可能有些同學到這裡沒怎麼看懂，沒關係！看下面程式碼就知道了。重新設計需求2的互動（選取）
#level1.selected{
border: 2px solid red;
}
#level2.selected{
border: 2px solid purple;
}
#level3.selected{
border: 2px solid orange;
}
#level4.selected{
border: 2px solid green;
}
#level5.selected{
border: 2px solid blue;
}$("#levelGroup li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});看完程式碼的你，是不是覺得跟我一樣開心，畢竟只是改變了一下css的新增類別方式，就可以讓後續的js程式碼如此簡潔！所以這裡得出的一個結論就是（上面已經提到過）：
盡量少的去增加新的控制類，以減少後續的js操作。以上是css如何使用id與class來控制元素樣式的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
