ホームページ > ウェブフロントエンド > htmlチュートリアル > マウスを使って表示内容を切り替えるにはどうすればよいですか? _html/css_WEB-ITnose

マウスを使って表示内容を切り替えるにはどうすればよいですか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:00:17
オリジナル
2088 人が閲覧しました

マウスを使って表示内容を切り替えるにはどうすればよいですか?このウェブサイトと同様に、上のメニューにマウスを移動すると、下のコンテンツが切り替わります。 画像を削除しないでください。


ディスカッションへの返信 (解決策)

オンラインで待機しています...

まだ待っています。 。

まだ待っています。 。 。

Baidu の推奨キーワード: js タブ。
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';    	}     }};
ログイン後にコピー

わからない場合は、個人的にメッセージを送ってください。コードをお知らせします

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート