ホームページ >ウェブフロントエンド >jsチュートリアル >ナビゲーション効果のjs css実装 example_javascriptスキル
ナビゲーション効果のjs css実装 example_javascriptスキル
- WBOYオリジナル
- 2016-05-16 16:14:561013ブラウズ
この記事の例では、js と css を使用してナビゲーション効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
1. プログラムコードは次のとおりです:
コードをコピー コードは次のとおりです:
<スクリプトタイプ="text/javascript">
for(var x = 1; x {
var menuid = document.getElementById("menu" x);
メニューID.num = x;
タイプ（）;
}
関数 type()
{
var menuh2 = menuid.getElementsByTagName("h2");
var menuul = menuid.getElementsByTagName("ul");
var menuli = menuul[0].getElementsByTagName("li");
menuh2[0].onmouseover = 表示;
menuh2[0].onmouseout = 非表示;
menuul[0].onmouseover = 表示;
menuul[0].onmouseout = 非表示;
関数 show()
{
menuul[0].className = "clearfix typeul ブロック"
}
関数 unshow()
{
menuul[0].className = "typeul"
}
for(var i = 0; i < menuli.length; i )
{
menuli[i].num = i;
var liul = menuli[i].getElementsByTagName("ul")[0];
if(リル)
{
typeshow()
}
}
関数 typeshow()
{
menuli[i].onmouseover = showul;
menuli[i].onmouseout = unshowul;
}
関数 showul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "ブロック";
}
関数 unshowul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "";
}
}
2. 程序效果
ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。