<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通讯簿</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
ul,ol,li{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
/*................................................................................................................*/
#head{
width: 100%;
height: 50px;
background-color: #7EC0EE;
}
#head a#a_left{
display: block;
width: 70px;
height: 30px;
margin-top: 10px;
margin-left: 10px;
background-color: #528B8B;
float: left;
margin-right: -100px;
text-align: center;
line-height: 30px;
border-radius: 5px;
box-shadow: 0px 0px 1px 1px #EDEDED;
font-family: "黑体";
font-size: 1em;
color: #fff;
}
#head a#a_right{
display: block;
width: 70px;
height: 30px;
margin-top: 10px;
margin-right: 10px;
background-color: #528B8B;
float: right;
margin-left: -100px;
text-align: center;
line-height: 30px;
border-radius: 5px;
box-shadow: 0px 0px 1px 1px #EDEDED;
font-family: "黑体";
font-size: 2em;
color: #fff;
}
#head span{
display: block;
width: auto;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 100px;
font-family: "黑体";
font-size: 1.2em;
}
#head a#a_left:hover,#head a#a_right:hover{
color: #EDEDED;
}
/*..............................................................................................*/
#search{
width: 100%;
height: 50px;
background-color: #EBEBEB;
}
#search input{
width: 92%;
height: 34px;
padding-left: 1%;
padding-right: 1%;
margin-left: 3%;
margin-right: 3%;
margin-top: 8px;
border-radius: 20px;
font-family: "黑体";
outline: none;
}
/*...............................................................................................................*/
.container{
width: 100%;
}
/*......................................................................................................*/
.container .slider_left{
width: 100%;
overflow: scroll;
overflow-x: hidden;
position: absolute;
z-index: 9;
}
.container .slider_left ul{
width: 100%;
height: auto;
}
.container .slider_left ul li{
width: 100%;
height: auto;
background-color: #ADD8E6;
line-height: 30px;
color: #fff;
font-family: "黑体";
}
.container .slider_left ul li.diff{
background-color: #7EC0EE;
}
.container .slider_left ul li ul{
width: 100%;
height: auto;
}
.container .slider_left ul li ul li{
width: 100%;
height: 30px;
background-color: #fff;
border-bottom: 1px solid #E8E8E8;
}
.container .slider_left ul li ul li a{
display: block;
width: 100%;
height: 30px;
}
.container .slider_left ul li ul li a:hover{
background-color: #EDEDED;
}
/*.............................................................................................................*/
.container .slider_right{
width: 30px;
background-color: #7EC0EE;
position: absolute;
z-index: 999;
right: 0;
}
.container .slider_right ul{
width: 100%;
height: auto;
}
.container .slider_right ul li{
width: 30px;
height: auto;
text-align: center;
}
.container .slider_right ul li a{
display: block;
width: 30px;
height: 100%;
color: #fff;
font-family: "黑体";
}
</style>
</head>
<body>
<div id="head">
<a id="a_left" href="/" target="_blank">群组</a>
<a id="a_right" href="/" target="_blank">+</a>
<span>所有联系人</span>
</div>
<div id="search">
<input id="btn_text" type="text" value="搜索">
</div>
<div id="container" class="container">
<div id="slider_left" class="slider_left">
<ul>
<li class="diff" id="a"> <strong>A</strong>
<ul>
<li><a href="/"> Adam</a></li>
<li><a href="/"> Alex</a></li>
<li><a href="/"> Ali</a></li>
<li><a href="/"> Apple</a></li>
<li><a href="/"> Arthur</a></li>
<li><a href="/"> Ashley</a></li>
</ul>
</li>
<li id="b"> <strong>B</strong>
<ul>
<li><a href="/"> Barry</a></li>
<li><a href="/"> Becky</a></li>
<li><a href="/"> Biff</a></li>
<li><a href="/"> Billy</a></li>
<li><a href="/"> Bozarking</a></li>
<li><a href="/"> Bryan</a></li>
</ul>
</li>
<li id="c"> <strong>C</strong>
<ul>
<li><a href="/"> Calista</a></li>
<li><a href="/"> Cathy</a></li>
<li><a href="/"> Chris</a></li>
<li><a href="/"> Cinderella</a></li>
<li><a href="/"> Corky</a></li>
<li><a href="/"> Cypher</a></li>
</ul>
</li>
<li id="d"> <strong>D</strong>
<ul>
<li><a href="/"> Damien</a></li>
<li><a href="/"> Danny</a></li>
<li><a href="/"> Denver</a></li>
<li><a href="/"> Devon</a></li>
<li><a href="/"> Doug</a></li>
<li><a href="/"> Dustin</a></li>
</ul>
</li>
<li id="e"> <strong>E</strong>
<ul>
<li><a href="/"> Elizabeth</a></li>
<li><a href="/"> Emily</a></li>
<li><a href="/"> Eva</a></li>
<li><a href="/"> Eric</a></li>
<li><a href="/"> Edward</a></li>
<li><a href="/"> Elena</a></li>
</ul>
</li>
<li id="f"> <strong>F</strong>
<ul>
<li><a href="/"> Frank</a></li>
<li><a href="/"> Fiona</a></li>
<li><a href="/"> Fernand</a></li>
<li><a href="/"> Francis</a></li>
<li><a href="/"> Francisco</a></li>
<li><a href="/"> Felix</a></li>
<li><a href="/"> Franz</a></li>
</ul>
</li>
<li id="g"> <strong>G</strong>
<ul>
<li><a href="/"> Gina</a></li>
<li><a href="/"> Gloria</a></li>
<li><a href="/"> Gabriel</a></li>
<li><a href="/"> Gavin</a></li>
</ul>
</li>
<li id="h"> <strong>H</strong>
<ul>
<li><a href="/"> Henry</a></li>
<li><a href="/"> Helen</a></li>
<li><a href="/"> Harry</a></li>
<li><a href="/"> Hans</a></li>
<li><a href="/"> Hugo</a></li>
</ul>
</li>
<li id="i"> <strong>I</strong>
<ul>
<li><a href="/"> Ivan</a></li>
<li><a href="/"> Isabella</a></li>
<li><a href="/"> Iris</a></li>
<li><a href="/"> Ingrid</a></li>
<li><a href="/"> Iola</a></li>
</ul>
</li>
<li id="j"> <strong>J</strong>
<ul>
<li><a href="/"> John</a></li>
<li><a href="/"> James</a></li>
<li><a href="/"> Jessica</a></li>
<li><a href="/"> Jennifer</a></li>
<li><a href="/"> Jason</a></li>
<li><a href="/"> Jenny</a></li>
</ul>
</li>
<li id="k"> <strong>K</strong>
<ul>
<li><a href="/"> Kim</a></li>
<li><a href="/"> Kevin</a></li>
<li><a href="/"> Kate</a></li>
<li><a href="/"> Karl</a></li>
</ul>
</li>
<li id="l"> <strong>L</strong>
<ul>
<li><a href="/"> Lily</a></li>
<li><a href="/"> Louis</a></li>
<li><a href="/"> Lisa</a></li>
<li><a href="/"> Linda</a></li>
</ul>
</li>
<li id="m"> <strong>M</strong>
<ul>
<li><a href="/"> Michelle</a></li>
<li><a href="/"> Mary</a></li>
<li><a href="/"> Maria</a></li>
<li><a href="/"> Michael</a></li>
</ul>
</li>
<li id="n"> <strong>N</strong>
<ul>
<li><a href="/"> Nicole</a></li>
<li><a href="/"> Natalie</a></li>
<li><a href="/"> Nancy</a></li>
<li><a href="/"> Nick</a></li>
</ul>
</li>
<li id="o"> <strong>O</strong>
<ul>
<li><a href="/"> Olivia</a></li>
<li><a href="/"> Oscar</a></li>
<li><a href="/"> Oliver</a></li>
<li><a href="/"> Olive</a></li>
</ul>
</li>
<li id="p"> <strong>P</strong>
<ul>
<li><a href="/"> Paul</a></li>
<li><a href="/"> Peter</a></li>
<li><a href="/"> Patrick</a></li>
<li><a href="/"> Philip</a></li>
</ul>
</li>
<li id="q"> <strong>Q</strong>
<ul>
<li><a href="/"> Queenie</a></li>
<li><a href="/"> Quincy</a></li>
<li><a href="/"> Quentin</a></li>
<li><a href="/"> Quin</a></li>
</ul>
</li>
<li id="r"> <strong>R</strong>
<ul>
<li><a href="/"> Robert</a></li>
<li><a href="/"> Rachel</a></li>
<li><a href="/"> Ryan</a></li>
<li><a href="/"> Richard</a></li>
</ul>
</li>
<li id="s"> <strong>S</strong>
<ul>
<li><a href="/"> Sunny</a></li>
<li><a href="/"> Sarah</a></li>
<li><a href="/"> Sara</a></li>
<li><a href="/"> Susan</a></li>
</ul>
</li>
<li id="t"> <strong>T</strong>
<ul>
<li><a href="/"> Thomas</a></li>
<li><a href="/"> Tina</a></li>
<li><a href="/"> Tony</a></li>
<li><a href="/"> Tom</a></li>
<li><a href="/"> Teresa</a></li>
</ul>
</li>
<li id="u"> <strong>U</strong>
<ul>
<li><a href="/"> Urban</a></li>
<li><a href="/"> Uriah</a></li>
<li><a href="/"> Unique</a></li>
<li><a href="/"> Una</a></li>
</ul>
</li>
<li id="v"> <strong>V</strong>
<ul>
<li><a href="/"> Vicky</a></li>
<li><a href="/"> Victor</a></li>
<li><a href="/"> Victoria</a></li>
<li><a href="/"> Vincent</a></li>
</ul>
</li>
<li id="w"> <strong>W</strong>
<ul>
<li><a href="/"> William</a></li>
<li><a href="/"> Wendy</a></li>
<li><a href="/"> Walter</a></li>
<li><a href="/"> Wayne</a></li>
</ul>
</li>
<li id="x"> <strong>X</strong>
<ul>
<li><a href="/"> Xena</a></li>
<li><a href="/"> Xander</a></li>
<li><a href="/"> Xaviera</a></li>
<li><a href="/"> Xochitl</a></li>
</ul>
</li>
<li id="y"> <strong>Y</strong>
<ul>
<li><a href="/"> Yolanda</a></li>
<li><a href="/"> Yvette</a></li>
<li><a href="/"> Yaritza</a></li>
<li><a href="/"> Yesenia</a></li>
</ul>
</li>
<li id="z"> <strong>Z</strong>
<ul>
<li><a href="/"> Zoe</a></li>
<li><a href="/"> Zara</a></li>
<li><a href="/"> Zoey</a></li>
<li><a href="/"> Zach</a></li>
</ul>
</li>
</ul>
</div>
<div id="slider_right" class="slider_right">
<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#d">D</a></li>
<li><a href="#e">E</a></li>
<li><a href="#f">F</a></li>
<li><a href="#g">G</a></li>
<li><a href="#h">H</a></li>
<li><a href="#i">I</a></li>
<li><a href="#j">J</a></li>
<li><a href="#k">K</a></li>
<li><a href="#l">L</a></li>
<li><a href="#m">M</a></li>
<li><a href="#n">N</a></li>
<li><a href="#o">O</a></li>
<li><a href="#p">P</a></li>
<li><a href="#q">Q</a></li>
<li><a href="#r">R</a></li>
<li><a href="#s">S</a></li>
<li><a href="#t">T</a></li>
<li><a href="#u">U</a></li>
<li><a href="#v">V</a></li>
<li><a href="#w">W</a></li>
<li><a href="#x">X</a></li>
<li><a href="#y">Y</a></li>
<li><a href="#z">Z</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var btn_text = document.getElementById('btn_text');
btn_text.onfocus = btn_focus;
function btn_focus(){
btn_text.value = '';
}
btn_text.onblur = btn_blur;
function btn_blur(){
if(btn_text.value == ''){
btn_text.value = '搜索';
}
else{
btn_text.value = btn_text.value;
}
}
</script>
<script type="text/javascript">
window.onload = slider_height;
function slider_height(){
var head_height = document.getElementById('head').offsetHeight;
var search_height = document.getElementById('search').offsetHeight;
var container_height = document.getElementById('container');
var slider_left = document.getElementById('slider_left');
var slider_right = document.getElementById('slider_right');
var html_height = document.documentElement.clientHeight;
var container_sty = container_height.style;
var slider_lef_sty = slider_left.style;
var slider_rig_sty = slider_right.style;
var z = container_height.offsetHeight = html_height - head_height - search_height;
container_sty.height = z + 'px';
slider_lef_sty.height = z + 'px';
slider_rig_sty.height = z + 'px';
var li_line_right = slider_right.getElementsByTagName('li');
var li_line_left = slider_left.getElementsByTagName('li');
for(var i =0;i<li_line_right.length;i++){
li_line_right[i].style.height = z/26 + 'px';
(function (i) {
li_line_right[i].onmouseover = function () {
li_line_left[i].style.backgroundColor = '#ADD8E6';
};
})(i);
}
}
</script>
</body>
</html>问题代码
如上图所示
如上图所示
好吧，看你那么辛苦，我就写点代码：
// 1. 先缓存后面要用到的 DOM
var sliderRight = document.getElementById('slider_right')
// 2. 事件委托给 div#slider_right，用于捕获具体点击到的 a（在 li）里面
sliderRight.addEventListener('click', function(event) {
var currentLink = event.target // 拿到当前点击的那个 a
var currentId = currentLink.href[1] // 获取它的 href，得到诸如 #a 这样的东东，然后顺手去掉前面的 #
// 3. 你左边的 li 不都有 id 吗？
document.getElementById(currentId).style.backgroundColor = '#ADD8E6'
})收工。几个小细节：
我没有绑定
mouseover事件，我也不理解为什么你一开始要用这个事件。你的每个a都是有href的，点击之后才可以跳转到对应的li不是吗？如果列表很长（超过一屏），你mouseover过去，对应的背景色变了你也看不到啊？如果要适应移动端，你还得绑定诸如
touch之类的事件，然而这个坑也有的，建议你针对移动端开发还是用一些成熟的工具库，比如 hammer.js 之类的我的事件回调函数里没有判断是不是 a，实际中有可能会代理到
event.target不是 a 的情况（比如得到了一个 li），那么此时获取href就无效了，所以为了代码健壮性起见，你需要在函数内自行过滤一些特殊情况。善于利用 DOM 结构；善于利用 event 对象。