<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body { margin: 0; padding: 0; } ul { padding: 0; margin: 0; } li { list-style: none; } a { text-decoration: none; color: #000; display: block; } #div1 { 250px; height: 20px; border: 1px solid #fe6601; padding: 5px; line-height:20px; margin: 20px auto 0 auto;} #ul1 { margin: 0 auto; 260px; line-height: 20px; border: 1px solid #fe6601; display: none;} #ul1 li a { padding: 5px; } #ul1 li a:hover { background: #fe6601; color: #fff; } </style> <script type="text/javascript"> window.onload = function () { var odiv = document.getElementById('div1'); var oul = document.getElementById('ul1'); var arr = []; odiv.onclick = function (ev) { var ev = ev || event; oul.style.display = 'block'; ev.cancelBubble = true; } for(var i = 0; i < oul.children.length; i++ ) { oul.children[i].onclick = function () { for(var i = 0; i < oul.children.length; i++ ) { oul.children[i].children[0].style.background = ''; oul.children[i].children[0].style.color = ''; } odiv.innerHTML = this.children[0].innerHTML; this.children[0].style.background = '#fe6601'; this.children[0].style.color = '#fff'; } } document.onclick = function () { oul.style.display = 'none'; arr = []; } }; </script> </head> <body> <div id="div1"></div> <ul id="ul1"> <li><a href="javascript:;">宋体</a></li> <li><a href="javascript:;">黑体</a></li> <li><a href="javascript:;">楷体</a></li> <li><a href="javascript:;">微软雅黑</a></li> <li><a href="javascript:;">新宋体</a></li> <li><a href="javascript:;">仿宋</a></li> </ul> </body> </html>