学习笔记：js Tab选项卡和手风琴

 

看了妙味课堂js视频教程，课前预热第二节后，明白选项卡的实现原理，

就是：点击菜单所以的元素的className都为空，然后只给点击的当前元素添加className;

 Tab选项卡和手风琴是一样的原理。

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<style type="text/css">
* { margin:0; padding:0; }
#menu { width:280px; margin:50px auto; border:1px solid #ddd; border-bottom:none; font-size:13px; }
#menu dt { background:#eee; padding:8px 10px; cursor:pointer; border-bottom:1px solid #ddd; color:#333; }
#menu dt.active { background:#555; color:#fff; }
#menu dd { padding:10px; height:100px; border-bottom:1px solid #ddd; display:none; color:#666; }
#menu dd.current { display:block; }
</style>
</head>

<body>








<dl id="menu">
    <dt class="active">菜单一</dt>
    <dd class="current">内容一</dd>
    <dt>菜单二</dt>
    <dd>内容二</dd>
    <dt>菜单三</dt>
    <dd>内容三</dd>
    <dt>菜单四</dt>
    <dd>内容四</dd>
    <dt>菜单五</dt>
    <dd>内容五</dd>
</dl>







<script type="text/javascript">
window.onload = function()
{
    var menu = document.getElementById("menu");
    var m_dt = menu.getElementsByTagName("dt");
    var m_dd = menu.getElementsByTagName("dd");
    for(var i=0; i<m_dt.length; i++)
    {
        m_dt[i].index = i;
        m_dt[i].onclick = function()
        {
            for(var i=0; i<m_dt.length; i++)
            {
                m_dt[i].className = "";
                m_dd[i].className = "";
            }
            this.className = "active";
            m_dd[this.index].className = "current";
        }
    }
}
</script>


</body>
</html>

 

 

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
* { margin:0; padding:0; }
ul { list-style:none; width:600px; border:1px solid #ddd; margin:0 auto; font-size:14px; }
#menu { background:#eee; height:30px; margin-top:100px; box-shadow:1px 0 10px #eee; }
#menu li { float:left; width:120px; text-align:center; height:30px; line-height:30px; border-right:1px solid #ddd; cursor:pointer; }
#menu li.active { background:#333; color:#fff; }
#content { border-top:none; border-radius:0 0 4px 4px; box-shadow:1px 1px 15px #eee; }
#content li { height:200px; display:none; padding:10px; }
#content li.current { display:block; }
</style>
</head>

<body>


<ul id="menu">
    <li class="active">菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
</ul>

<ul id="content">
    <li class="current">内容一</li>
    <li>内容二</li>
    <li>内容三</li>
</ul>

<script>
window.onload = function()
{
    var tab_t = document.getElementById("menu").getElementsByTagName("li");
    var tab_c = document.getElementById("content").getElementsByTagName("li");
    for(var i=0; i<tab_t.length; i++)
    {
        tab_t[i].index = i;
        tab_t[i].onclick = function()
        {
            for(var i=0; i<tab_t.length; i++)
            {
                tab_t[i].className = "";
                tab_c[i].className = "";
            }
            tab_c[this.index].className = "current";
            this.className = "active";
        }
    }
}
</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2012-08-04 16:02  赵小磊  阅读(581)  评论(0)  编辑  收藏  举报
回到头部