如何在jQuery中自定义属性data-val

tangjin

作者

如何在jQuery中自定义属性data-val？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

1.css

.active{
color:red;
}

2.html

<ul>
<lidata-val="1">1</li>
<lidata-val="2">2</li>
<lidata-val="3">3</li>
<lidata-val="4">4</li>
<lidata-val="5">5</li>
</ul>

3.js

//方法1
$(function(){
$("ulli[data-val='1']").addClass("active").siblings().removeClass("active")
});
//方法2
$("ulli").each(function(){
if($(this).attr("data-val")=="1"){
$(this).addClass("active").siblings().removeClass("active");
}
})

效果：

测试示例：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<ul>
<lidata-val="1">1</li>
<lidata-val="2">2</li>
<lidata-val="3">3</li>
<lidata-val="4">4</li>
<lidata-val="5">5</li>
</ul>
<script>
$(function(){
$("ulli[data-val='1']").addClass("active").siblings().removeClass("active")
});
</script>
</body>
</html>

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。

阅读全文

发布于 2021-04-08 13:36:43

jquery