Home > Article > Web Front-end > 鼠标经过切换不同的显示内容怎么做呢?_html/css_WEB-ITnose
鼠标经过切换不同的显示内容怎么做呢? 类似这个网站上 鼠标移动上面菜单 下面的内容会切换 求别删图片 真心求教
在线急等······
我还在等。。
仍然在等。。。
建议百度关键字:js tab选项卡。
http://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=tab%E9%80%89%E9%A1%B9%E5%8D%A1&oq=js%20tab%E9%80%89%E9%A1%B9%E5%8D%A1&rsv_pq=d492a3da0009aea6&rsv_t=7c449SlOK3Rg3Wz5eHTM%2Fa5SOUPBCXEUx1aN4WQgyXUev9Cq4ZuUujwziEw&rsv_enter=0&rsv_sug3=1&rsv_sug1=1&prefixsug=tab%E9%80%89%E9%A1%B9%E5%8D%A1&rsp=0&rsv_sug7=100&inputT=1014&rsv_sug4=1014
function $(id){ return typeof id==='string'?document.getElementById(id):id;}window.onload=function(){ //获取鼠标滑过或点击的标签和要切换内容的元素 var titles=$('notice-tit').getElementsByTagName('li'); var divs=$('notice-con').getElementsByTagName('div'); if(titles.length!=divs.length) return; // 遍历titles下的所有li for(var i=0;i<titles.length;i++){ titles[i].id=i; titles[i].onmouseover=function(){ //清除所有li上的class for(var j=0;j<titles.length;j++){ titles[j].className=""; divs[j].style.display='none'; } // 设置当前划过的class为高亮 this.className="select"; divs[this.id].style.display='block'; } }};
你要是看不懂,私聊我,我给你代码把