html css data-,HTML+CSS入门 HTML自定义data属性详解

本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<

可以在HTML标签上添加任意以 "data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。

例子：

test data

如何读取自定义data属性数据呢？

jquery已经有现成的方法：

var myData = $(".my-data")data("category");//这样就能返回对应的值

你也可以在data-*属性中使用json语法：

例如：

你可以通过js直接访问这个数据，通过json的key值，你能得到相应的value：

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

通过自定义data属性，可以让交互变得更简单：

例如：

全部视频
运动视频
导航视频
舵机视频
视觉视频

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

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！

html css data-,HTML+CSS入门 HTML自定义data属性详解相关推荐

php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
css background-attachment属性详解
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 backg ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
CSS 浮动布局放弃float，拥抱flex（详解）
CSS 浮动布局放弃float,拥抱flex(详解) 文章目录 CSS 浮动布局放弃float,拥抱flex(详解) 说明 Flex布局容器和项目容器属性 flex-direction属性 fle ...
php中li标签,li标签有哪些属性？css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...

html css data-,HTML+CSS入门 HTML自定义data属性详解

html css data-,HTML+CSS入门 HTML自定义data属性详解相关推荐

最新文章

热门文章