Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Simulated City switching</title></pead><style type="text/css">. Change {float: left ;}. togglecity {cursor: pointer; height: 24px; line-height: 24px; padding: 0 10px ;}. citylist {position: absolute; z-index: 11111; padding: 5px; background: #515151; width: 280px; display: none;} ul {list-style: none; padding: 0; margin: 0;} ul. listcity li {float: left; width: 70px;} ul. listcity a {display: block; text-align: center; padding: 2px 5px; color: # fff; font-size: 14px;} ul. listcity a: hover {background: #666; color: # CF0 ;}</style><script type="text/javascript" language="javascript">/* Function showMenu (e) {document. getElementById ('citylist '). style. display = 'block'; var e = e | window. event; if (e. stopPropagation) e. stopPropagation (); else {e. cancelBubble = true;} * // window. onload = function () {document. onclick = function (e) {var e = e | event; var target1_e.tar get | e. srcElement; if (target. id = 'togglecity') {document. getElementById ('citylist '). style. display = 'block'} if (target. id! = 'Togglecity' & target. id! = 'Citylist') {document. getElementById ('citylist '). style. display = 'none'} if (target. tagName = 'A' & target. parentNode. parentNode. parentNode. id = 'citylist') {document. getElementById ('city '). innerHTML = target. innerHTML; return false ;}}//}</script><body> <div class="city" > <p>Beijing</p> <!--切换城市开始--> <div class="change">Switch city<div id="citylist" class="citylist"> <ul class="listcity"> <li>Macao</li> <li>Beijing</li> <li>Changchun</li> <li>Changsha</li> <li>Hong Kong</li> <li>Guangzhou</li> <li>Shenzhen</li> <li>Taiwan</li> </ul> </div> </div> <!--切换城市结束--> </div></body> </td> </tr></table>
Tip: you can modify some code before running
