Tab jQuery "data-id" 内容

Question

我想知道如何调用 jQuery

中的数据 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 "data-id" 内容

Tab jQuery "data-id" content

jquery

tabs