58同城前端笔试题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了58同城前端笔试题相关的知识，希望对你有一定的参考价值。

题目大意是：用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同城前端笔试题的主要内容，如果未能解决你的问题，请参考以下文章

58同城笔试题

58同城笔试题：数组去重；分饼干（分糖果）；最小路径和（leetcode64）

58同城 | C/C++工程师笔试题详解

JavaScript笔试题（js高级代码片段）

笔试题58. LeetCode OJ (45)

各个公司前端笔试题回顾