首页 > 代码库 > 58同城前端笔试题

58同城前端笔试题

2024-08-11 12:36:13   218人阅读

题目大意是：用html、css和JS模拟下拉列表的实现。

HTML：

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/select.css"><title>模拟下拉列表</title></head><body><form action="" method="post"><div id="divselect">  <div id="select"><span id="txt">请选择</span><span id="arrow"></span></div >      <ul id="option">         <li><a href="javascript:;" selectid="1">导航菜单</a></li>         <li><a href="javascript:;" selectid="2">焦点幻灯片</a></li>         <li><a href="javascript:;" selectid="3">广告代码</a></li>         <li><a href="javascript:;" selectid="4">网页特效</a></li>         <li><a href="javascript:;" selectid="5">jquery特效</a></li>      </ul>  </div></form><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/select.js"></script></body></html>

CSS：

技术分享
body, ul, li {  margin: 0;  padding: 0;  font-size: 13px;}ul, li {  list-style: none;}#divselect {  width: 186px;  margin: 80px auto;  position: relative;  z-index: 10000;}#divselect div {  width: 150px;  height: 24px;  line-height: 24px;  display: block;  color: #807a62;  cursor: pointer;  font-style: normal;  padding-left: 4px;  padding-right: 30px;  border: 1px solid #333333;}#divselect ul {  width: 184px;  border: 1px solid #333333;  background-color: #ffffff;  position: absolute;  z-index: 20000;  margin-top: -1px;  display: none;}#divselect ul li {  height: 24px;  line-height: 24px;}#divselect ul li a {  display: block;  height: 24px;  color: #333333;  text-decoration: none;  padding-left: 10px;  padding-right: 10px;}#divselect ul li a:hover {  background-color: #CCC;}#arrow {  display: block;  content: ‘‘;  border-color: #ccc transparent transparent transparent;  border-style: solid;  border-width: 9px;  height: 0px;  width: 0px;  position: absolute;  right: 1%;  top: 40%}#select{  position:relative}
View Code

JS：

技术分享
var select=document.getElementById(‘select‘);var option=document.getElementById(‘option‘);var txt=document.getElementById(‘txt‘);select.onclick=function(ev){  ShowOrHide();}/*A点击事件委托在UL上完成*/option.onclick=function(ev){  var e=ev||window.event;  var target=e.target||e.srcElement;  if(target.nodeName.toUpperCase()=="A"){       txt.innerHTML=target.innerHTML;       ShowOrHide();  }}function ShowOrHide(){  if(option.style.display==‘‘)  {    option.style.display=‘block‘;  }  else{    option.style.display=‘‘;  }}
View Code

 

58同城前端笔试题


联系
我们