Home > Web Front-end > HTML Tutorial > 鼠标经过切换不同的显示内容怎么做呢?_html/css_WEB-ITnose

鼠标经过切换不同的显示内容怎么做呢?_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:00:17
Original
2087 people have browsed it

鼠标经过切换不同的显示内容怎么做呢?  类似这个网站上     鼠标移动上面菜单 下面的内容会切换 求别删图片 真心求教


回复讨论(解决方案)

在线急等······

我还在等。。

仍然在等。。。

建议百度关键字: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';    	}     }};
Copy after login

你要是看不懂,私聊我,我给你代码把

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template