html 如下 ：
<div> <ul id = "Pingstar"> <li rel = "1"> </li> <li rel = "2"> </li> <li rel = "3"> </li> <li rel = "4"> </li> <li rel = "5"> </li> <span id = "dir"> </span> </ul> <입력 유형 = "hidden" "id" "" "id" ""
CSS ： ：
.Starts, .starts ul {float : left;}. 시작 {Padding-left : 16px; Padding-Top : 7px;}. Start ul Li {width : 32px; 높이 : 31px; float; 배경 : #ddd; Padding-right : 3px;}. 시작 Ul Li.on {배경;} span {display : inline; float : 왼쪽; 패딩 왼쪽 : 10px; 높이 : 31px; 선-높이 : 31px;}最后 js 调用如下 :
window.onload = function () {var s = document.getElementById ( "pingstar"), m = document.getElementById ( 'dir'), n = s.getElementsByTagName ( "li"), input = document.getElementById ( 'startP'); // clearall = function () {for (var i = 0; i <n.length; i ++) {n [i] .classname = ''; }} for (var i = 0; i <n.length; i ++) {n [i] .onclick = function () {var q = this.getAttribute ( "rel"); clearall (); input.value = q; for (var i = 0; i <q; i ++) {n [i] .classname = 'on'; } m.innerhtml = this.getAttribute ( "title"); } n [i] .onmouseOver = function () {var q = this.getAttribute ( "rel"); clearall (); for (var i = 0; i <q; i ++) {n [i] .classname = 'on'; }} n [i] .onmouseout = function () {clearall (); for (var i = 0; i <input.value; i ++) {n [i] .classname = 'on'; }}}}http://demo.vevb.com/js/2014/jsxxdf/
如果有喜欢使用基于 jQuery ery, 可以参考这个地址 ： //www.vevb.com/jiaoben/195077.html