H5中自定义属性实现tab栏切换案例

自定义属性规范

H5规范：data-* 属性以data-开头,其格式如下data-*=”xxx”

<div id="demo" data-myname="userName" data-age="10">

Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，
Node.dataset则存储了所有的自定义属性的值。

var demo = document.querySelector(选择器);

获取属性:

当我们如下格式设置时，则需要以驼峰格式才能正确获取

jquery的方式获取
- $(‘#id’).data(‘属性名称)
H5的方式获取
- dataset.属性名称（省略data-）
- dataset.[属性名称]（省略data-）

var name = demo.dataset['userName'];
var age = demo.dataset.userName;

<div id="demo" data-my-name="userName" data-age="10">
data-* 属性以data-开头遵循小驼峰命名 data-user-name被获取时使用userName (浏览器解析大小转为小写)
正确获取方法:
var name = demo.dataset[‘userName’];
var age = demo.dataset.userName;

修改属性:

jquery的方式修改
- $(‘#id’).data(属性名称 , 属性值);
H5的方式修改
- dataset.属性名称 = ‘属性值’

demo.dataset['userName'] = 'developer';

此案例使用自定义属性的优点分析:
在导航标签里分别添加一个自定义属性, 格式为data-id="id名" 这里的id名对应内容标签里的id属性对应的值, 这样的话导航标签就跟内容标签对应起来了, 不需考虑标签的先后顺序.

TAB栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab-切换（选项卡）</title>
    <style>
        .tab {
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }

        .tab ul {
            list-style: none;
            margin: 0;
            padding: 0;
            height: 50px;
        }

        .tab ul li {
            float: left;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: green;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        .tab ul li.now {
            background: red;
        }

        .tab > div {
            padding: 10px;
            display: none;
        }

        .tab > div.active {
            display: block;
        }
    </style>
</head>
<body>
<div class="tab">
    <ul>
        <li data-id="hot" class="break">面包</li>
        <li data-id="milk">牛奶</li>
        <li data-id="youtiao">油条</li>
        <li data-id="tofu">老豆腐</li>
    </ul>
    <div id="break">
       面包面包面包面包面包面包面包面包面包面包面包面包
    </div>
    <div id="youtiao" class="active">
        油条油条油条油条油条油条油条油条油条油条油条油条油条
    </div>
    <div id="tofu">
       老豆腐老豆腐老豆腐老豆腐老豆腐老豆腐老豆腐老豆腐
    </div>
    <div id="milk">
        牛奶牛奶牛奶牛奶牛奶牛奶牛奶牛奶牛奶牛奶牛奶牛奶
    </div>
</div>
<script>
    window.onload = function (ev) {
        /*1. 点击菜单 更换当前样式*/
        /*2. 点击菜单 更换当前显示的内容*/
        document.querySelector('ul').onclick = function (e) {
            /*事件触发源*/
            var currentLi = e.target;
            console.log(e.target.tagName);
            if(e.target.tagName == 'LI'){
                /*判断是否已经是选中的 如果是执行停止*/
                if(currentLi.classList.contains('now')) return;
                /*去掉之前的 给当前的加上 now*/
                var oldLi = document.querySelector('li.now');
                oldLi.classList.remove('now');
                currentLi.classList.add('now');

                /*隐藏之前显示的内容*/
                var oldContentId = oldLi.dataset.id;
                document.querySelector('#'+oldContentId).classList.remove('active');
                /*显示的当前的内容*/
                var currentContentId = currentLi.dataset.id;
                document.querySelector('#'+currentContentId).classList.add('active');
            }
        }
    }
</script>
</body>
</html>

H5中自定义属性实现tab栏切换案例

自定义属性规范

获取属性:

修改属性:

TAB栏案例

猜你喜欢