이제 다음과 같은 예시 요구 사항이 있습니다.
1) 빨간색, 보라색, 주황색, 녹색 및 파란색 글꼴 색상으로 표시된 5개의 상자를 그립니다.
2) 상자 중 하나를 마우스로 클릭하면 테두리가 표시됩니다. 굵게 표시되고 상자 글꼴의 색상은 색상과 일치합니다.
효과는 아래와 같습니다.
(그림 1) 상자 렌더링
아래는 구체적인 구현 아이디어입니다.
<ul id='levelGroup'> <li id='level1' >红</li> <li id='level2' >紫</li> <li id='level3' >橙</li> <li id='level4' >绿</li> <li id='level5' >蓝</li> </ul>
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; }
.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; }
$("#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"); } });
});
#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가 ID와 클래스를 사용하여 요소 스타일을 제어하는 방법에 대한 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!