可以在HTML標簽上添加任意以 "data-"開頭的屬性，這些屬性頁面上是不顯示的，它不會影響到你的頁面布局和風格，但它卻是可讀可寫的。

例子：<div class="my-data" data-category="motion">test data</div>

如何讀取自定義data屬性數據呢？

jquery已經有現成的方法：

var myData = $(".my-data")data("category");//這樣就能返回對應的值

你也可以在data-*屬性中使用json語法：

例如：<div id="my-data" data-category=‘{"game":"on"}‘></div>

你可以通過js直接訪問這個數據，通過json的key值，你能得到相應的value：

var gameStatus= $(".my-data").data("category").game;

通過自定義data屬性，可以讓交互變得更簡單：

例如：

<ul class="video-aside" id="video-nav">
    <li class="video-aside-item nav-selected" data-category="all">
        <span class="video-aside-text">全部視頻</span>
    </li>
    <li class="video-aside-item" data-category="motion">
        <span class="video-aside-text">運動視頻</span>
    </li>
    <li class="video-aside-item" data-category="navigation">
        <span class="video-aside-text">導航視頻</span>
    </li>
    <li class="video-aside-item" data-category="steer">
        <span class="video-aside-text">舵機視頻</span>
    </li>
    <li class="video-aside-item" data-category="visual">
        <span class="video-aside-text">視覺視頻</span>
    </li>
</ul>

<div class="video-item" data-category="motion">
　　<video src=""></video>
</div>

<div class="video-item" data-category="navigation">
　　<video src=""></video>
</div>

<div class="video-item" data-category="navitation">
　　<video src=""></video>
</div>

<div class="video-item" data-category="motion">
　　<video src=""></video>
</div>

<div class="video-item" data-category="steer">
　　<video src=""></video>
</div>

<div class="video-item" data-category="visual">
　　<video src=""></video>
</div>

jQ控制：

$(".video-aside-item").click(function (e) {
    var _this = e.currentTarget;
    $(_this).addClass("nav-selected").siblings().removeClass("nav-selected");
    var dataCategory = $(_this).data("category");
    if(dataCategory == ‘all‘){
        $(".video-item").show();
        return;
    }
    $(".video-item").each(function () {
        var itemCategory = $(this).data("category");
        if(dataCategory == itemCategory){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
});
這樣在進行切換的時候，就不需要進行ajax數據請求，從而達到交互更流暢

html自定義data屬性