可以在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数据请求，从而达到交互更流畅