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

原创 2018年04月17日 01:21:54
自定义属性规范

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>

大学生中走出的“不就业族”

大学生中走出的“不就业族”  大学生中不急于就业者增多  在绝大多数大学毕业生为找到一份合适的工作而奔波苦恼时,上海高校的毕业生就业市场上却出现了奇怪的一幕:一些毕业生对就业说“不”。  据了解,这些...
  • stanely
  • stanely
  • 2001-06-04 16:56:00
  • 1402

H5 tab切换页面

&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; ...
  • xutongbao
  • xutongbao
  • 2018-02-11 18:42:01
  • 360

H5实战(二):Tab标签切换效果

一 Tab标签切换效果的思路与实现 1.目标效果: 实现鼠标移到不同的tab标签上,下面对应的内容进行切换的效果,同时,被选中的选项卡有左右边框,无下边框,而未被选中的则存在下边框。 2.实现思...
  • weiweitb8
  • weiweitb8
  • 2017-09-11 16:57:41
  • 1404

html css 仿微信底部自定义菜单

  • 2014年07月27日 23:30
  • 58KB
  • 下载

js案例-4 经典tab栏切换

经典tab栏切换 标题改变 子栏目也对应改变
  • u011301203
  • u011301203
  • 2016-09-04 23:54:10
  • 656

tab栏切换原理

在线演示 tab栏切换原理 .box{ width: 400px; margin: 100px auto...
  • erdouzhang
  • erdouzhang
  • 2017-03-09 17:40:08
  • 1487

关于用原生js实现tab栏的切换:

今天并不是很忙 ,然后就复习了原生的js。如何用原生js实现tab栏的切换呢?请看下图:当鼠标在女装男装时,显示女装男装。 当鼠标点击鞋子时,出现鞋靴的盒子。 准备一个测试的demo: 举个栗子...
  • nevercurtain
  • nevercurtain
  • 2016-12-20 23:38:42
  • 2761

原生JS实现TAB栏切换

之前上传了一个jquery实现tab栏切换的博客,这个是原生js实现tab栏切换的案例,不多说直接上代码!同样复制粘贴就能看到效果哦! .Box{ ...
  • alokka
  • alokka
  • 2017-06-30 00:42:05
  • 1421

js实现tab栏切换效果(一)

利用javascript实现tab栏切换效果, 其中原理“置之死地而后生”,先把所有人干掉,自己再复活。 直接上代码: ...
  • diligentkong
  • diligentkong
  • 2017-01-25 17:17:02
  • 423

web实战(三)— — Tab选项卡切换效果

参考慕课网教程《Tab选项卡切换效果》:http://www.imooc.com/learn/176 基本功能有延迟切换、自动切换。本文用jquery实现1、html tab标...
  • mqy1023
  • mqy1023
  • 2016-04-19 22:45:41
  • 7141
收藏助手
不良信息举报
您举报文章:H5中自定义属性实现tab栏切换案例
举报原因:
原因补充:

(最多只允许输入30个字)