Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

时间：2023-03-08 16:53:53
Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

学习了DOM的知识，今天开始做些练习，想到了一个网页滑动门的特效，见下图：
Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

1、通过建立索引实现

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js简单滑动门</title>

<style type="text/css">

*{ padding:0; margin:0; font-size:14px;}

li{ list-style:none}

#tab1{ width:600px; height:400px; margin:20px auto; overflow:hidden; position:relative}

#tab1_memu{ width:600px; height:40px; position:absolute; left:0; top:0; z-index:2; border-left:1px solid #333}

#tab1_memu li{ width:100px;height:39px; line-height:40px; background:#eee;float:left;text-align:center; border-right:1px solid #333;border-top:1px solid #333;}

#tab1_memu li.current{font-weight:bold; color:#F00; background:#fff;border-right:1px solid #333;border-top:2px solid #f00;border-bottom:1px solid #fff; }

#tab1_main{ width:598px; height:320px; position:absolute; left:0; top:40px; border:1px solid #333;z-index:1}

#tab1_main li{ display:none}

#tab1_main li.current{ display:block}

#tab1_main p{ margin:20px}

</style>

<script >

/*原理：

1、页面载入后，设置选项卡第一项为默认显示，改变其css样式

2、添加事件处理函数

当鼠标浮动到某菜单时，(1)清除所有菜单节点的className属性，为当前菜单项添加className属性(2)隐藏所有选项卡内容节点，显示菜单项对应的内容节点

*/

window.onload = function(){

	var tabs=document.getElementById("tab1_memu").getElementsByTagName("LI");

	var tab_contents=document.getElementById("tab1_main").getElementsByTagName("LI");

	tabs[0].className="current"; //初始化

	tab_contents[0].className="current";//初始化

	for(var i=0;i<tabs.length;i++){

		tabs[i].index=i;//给tabs[i]对象增加一个属性并赋值，即为每个菜单建立索引

		tabs[i].onmouseover=function(){

			for(var j=0;j<tabs.length;j++){

				tabs[j].className="";

				tab_contents[j].className="";

			}

			this.className="current";

			tab_contents[this.index].className="current";

		}//为每个菜单项绑定鼠标浮动事件

	}

}

</script>

</head>

<body>

  <div id="tab1" >

      <ul id="tab1_memu">

        <li>菜单1</li>

        <li>菜单2</li>

        <li>菜单3</li>

        <li>菜单4</li>

      </ul>

      <ul id="tab1_main">

      	<li><p>内容1</p></li>

        <li><p>内容2</p></li>

        <li><p>内容3</p></li>

        <li><p>内容4</p></li>

      </ul>

  </div>

</body>

</html>

这种方式在扩展一下，做一个可以重用的滑动门效果，javascript部分改写为：

function hdm(m_id,c_id){

    var tabs=document.getElementById(m_id).getElementsByTagName("LI");

    var tab_contents=document.getElementById(c_id).getElementsByTagName("LI");

    tabs[0].className="current"; //初始化

    tab_contents[0].className="current";//初始化

    for(var i=0;i<tabs.length;i++){

        tabs[i].index=i;//给tabs[i]对象增加一个属性并赋值，即为每个菜单建立索引

        tabs[i].onmouseover=function(){

            for(var j=0;j<tabs.length;j++){

                tabs[j].className="";

                tab_contents[j].className="";

            }

            this.className="current";

            tab_contents[this.index].className="current";

        }//为每个菜单项绑定鼠标浮动事件

    }

}

window.onload = function(){

    hdm("tab1_memu","tab1_main");

}

相关文章