zoukankan      html  css  js  c++  java
  • dom 筛选器

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    dd {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
    window.onload = function ()
    {
        var odl = document.getElementsByTagName('dl');
        var odiv = document.getElementById('div1');
        var location = '';
        var position = '';
        var salary = '';
        
        for(var i = 0; i < odl.length; i++)
        {
            fn(i);
        }
        
        function fn(n)
        {
            var odd = odl[n].getElementsByTagName('dd');
            for(var i = 0; i < odd.length; i++ )
            {
                odd[i].onclick = function ()
                {
                    switch(n)
                    {
                        case 0:
                        location = this.innerHTML + ' ';
                        break;
                        case 1:
                        position = this.innerHTML + ' ';
                        break;
                        case 2:
                        salary = this.innerHTML + ' ';
                        break;
                    }
                    odiv.innerHTML  = location + position + salary;
                };
            }
        }
    }
    </script>
    </head>
    
    <body>
        <dl>
            <dt>地区</dt>
            <dd>东城</dd>
            <dd>西城</dd>
            <dd>朝阳</dd>
            <dd>昌平</dd>
        </dl>
        <dl>
            <dt>职位</dt>
            <dd>美工设计</dd>
            <dd>前端工程师</dd>
            <dd>后台开发</dd>
        </dl>
        <dl>
            <dt>薪资</dt>
            <dd>4000</dd>
            <dd>5000</dd>
            <dd>6000</dd>
        </dl>
        <div id="div1"></div>
    </body>
    </html>
  • 相关阅读:
    HDU_5057_分块
    HYSBZ_2002_分块
    HDU_1166_树状数组
    HDU_5692_dfs序+线段树
    多重背包
    二进制中一的个数
    康托展开
    vector, map, queue,set常用总结
    错误票据
    高精度计算
  • 原文地址:https://www.cnblogs.com/mayufo/p/4208933.html
Copyright © 2011-2022 走看看