04.菜单与筛选

1.新建04.html,添加基础代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>menu_filter</title>
    <style>
    </style>
</head>
<body>
    <script>
    </script>
</body>
</html>

2.在body中，script前面添加一个id="container"的div和一个id="result"的span。

<div id="container"></div>
<span id="result"></span>

3.在script中添加脚本，动态创建label标签并添加到div中；浏览器中打开，显示如下图。

    var container = document.getElementById('container')
    var subjects = ['全部', '语文', '数学', '英语', '物理', '化学']//定义subjects数组

    for (var i = 0; i < subjects.length; i++) {
        var label = document.createElement('label')//通过js动态创建label元素
        label.innerHTML = subjects[i]//创建的label元素的显示文本为subjects数组
        container.appendChild(label)///创建的label元素添加到container中
    }

在这里插入图片描述
4.添加css样式，显示如下图。

        #container {
            width: auto;
            background: linear-gradient(#555, #333);/* 渐变背景 */
            color: #eee;
        }
        label {
            display: inline-block;
            width: auto;
            line-height: 30px;
            padding: 5px 15px;
            user-select: none;
            cursor: pointer;
        }
        .click {
            background-color: #bbb;
            color: #333;
            cursor: default;
        }

在这里插入图片描述
5.script中，前面的代码后，添加默认选中项的代码

        var select = container.children[0]//设置默认选中项为第一个子元素
        select.classList.add('click')
        var result = document.getElementById('result')//显示第一个子元素的信息
        result.innerHTML = '你选的是：' + select.innerHTML

在这里插入图片描述
6.后面继续添加container的鼠标点击事件的代码。

        container.onclick = function (e) {
            if (e.target.tagName == 'LABEL' && !e.target.className) {//当元素是label并且不存在class属性
                e.target.classList.add('click')
                result.innerHTML = '你选的是：' + e.target.innerHTML
                if (select) select.classList.remove('click')//前一个选中项移除click样式
                select = e.target
            }
        }

最终效果
在这里插入图片描述
-------------------完--------------------

yaochaohx

发布了30 篇原创文章 · 获赞 2 · 访问量 6415

私信关注

猜你喜欢