Question

我想知道如何在jQuery中调用data-id

例如：

HTML：

<ul class="tab-menu">
    <li><a href="#item-1">Item 1</a></li>
    <li><a href="#item-2">Item 2</a></li>
    <li><a href="#item-3">Item 3</a></li>
</ul>

<div class="tab-wrapper">
    <div class="tab-content" data-id="item-1">
        ....
    </div>
    <div class="tab-content" data-id="item-2">
        ....
    </div>
    <div class="tab-content" data-id="item-3">
        ....
    </div>
</div>

jQuery的：

$(".tab-menu a").click(function(e) {
    e.preventDefault();
    ...
});

我的jQuery级别非常基础，有人可以帮助我吗？

Answer 1

试试这个：

$(".tab-menu a").click(function(e) {  
    $("div [data-id]").hide(); // Hides all the elements with attribute data-id
    $("div [data-id='" + $(this).attr("href").replace("#","") + "']").show(); // display the div matching the selected li
   e.preventDefault();
});

https://jsfiddle.net/u6td2hom/2/

如果您希望使用类而不是hide / show：

$(".tab-menu a").click(function(e) {  
    $("div [data-id]").removeClass("active");  
    $("div [data-id='" + $(this).attr("href").replace("#","") + "']").addClass("active");
    e.preventDefault();
});

https://jsfiddle.net/u6td2hom/3/

Answer 2

“呼叫数据ID”是什么意思？如果您想访问其内容：

$("div").data("id")

https://api.jquery.com/jquery.data/

Tab jQuery＆＃34; data-id＆＃34;内容

2 个答案: