<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> *{ padding:0;margin:0;list-style:none} .all{ margin:100px auto;border:1px solid #CCC;text-align:center;padding:10px;height: 300px; width: 400px;} .all h1{ text-align:center;line-height:30px;} .all h1 span{ background:#999} .all ul li { background:red;height:270px;display:none;margin-top: 3px;} .all ul li.select{ display:block;} .all h1 span.select{ background:#F00} </style></head><body><div class='all' id='box01'> <h1> <span class='select'>新闻</span> <span>经济</span> <span>科技</span> <span>体育</span> </h1> <ul> <li class='select'>新闻的内容</li> <li>经济的内容</li> <li>科技的内容</li> <li>体育的内容</li> </ul></div><div class='all' id='box02'> <h1> <span class='select'>NBA</span> <span>足球</span> <span>羽毛球</span> <span>瑜伽</span> </h1> <ul> <li class='select'>篮球内容</li> <li>足球的内容</li> <li>羽毛球的内容</li> <li>瑜伽的内容</li> </ul></div></body></html><script> function tab(id) { //如何获取某个父元素下面的子元素 var box = document.getElementById(id); var spans = box.getElementsByTagName('span'); var lis = box.getElementsByTagName('li'); //两步走 //第一步: 先把上半部分实现 //群体绑定事件 -- 对所有的span绑定事件 //群体绑定事件 for(var i=0;i<spans.length;i++) { //相亲法则 -- 给男一号一个代号 -- 怎么给 -- 自定义属性 spans[i].index=i; spans[i].onmouseover = function() { //排他思想 -- 将所有的span置为默认状态 --- 然后再将当前鼠标移上的span置为class -- select for(var i=0;i<spans.length;i++) { spans[i].className=''; lis[i].className=''; } this.className='select'; lis[this.index].className='select'; // 第二步: 实现下半部分 // 排他思想: 将所有的li隐藏起来 然后再将当前鼠标悬浮对应的li显示出来 // for(var i=0;i<lis.length;i++) // { // lis[i].className=''; // } // 寻找对应的女方 // lis[this.index].className='select'; } } } tab('box01'); tab('box02'); </script>
女爷i
左手的ㄟ右手
╰+攻爆jí腚メ
分手后的思念是犯贱
今天药忘吃喽~
还没有评论，来说两句吧...