Question

当点击相应的标签链接时，我正在尝试在下方显示其内容，下面的jquery可以运行，但在此示例中：http://jsfiddle.net/jMQs9/

我需要显示两个'.tab-content'

中的内容

它只适用于第一个而忽略了第二个，我认为问题是因为你不能有多个id，有没有人知道我需要解决这个问题？

$(function () {

    $('.tab-links li').click(function (e) {
        e.preventDefault();
        $('.tab-content > li').hide();
        $('#' + $(this).data('num')).show();
    });

});

Answer 1

使用class代替id

请参阅demo

<ul class="tab-links">
    <li data-num="1"><a href="#">tab one</a>

    </li>
    <li data-num="2"><a href="#">tab two</a>

    </li>
</ul>
<ul class="tab-content">
    <li class="1">content for tab one</li>
    <li class="2">content for tab two</li>
</ul>

<ul class="tab-content">
    <li class="1">content for tab one #2</li>
    <li class="2">content for tab two #2</li>
</ul>

是：

$(function () {

$('.tab-links li').click(function (e) {
    e.preventDefault();
    $('.tab-content > li').hide();
    $('.' + $(this).data('num')).show();
});

});

Answer 2

是的，你是对的问题是你有多个具有相同ID的元素，在这种情况下当你使用id-selector时，它将返回带有所述ID的第一个元素。

您可以使用自定义属性，属性等于选择器

<ul class="tab-content">
    <li data-id="1">content for tab one #2</li>
    <li data-id="2">content for tab two #2</li>
</ul>

然后

jQuery(function ($) {
    $('.tab-links li').click(function (e) {
        e.preventDefault();
        $('.tab-content > li').hide();
        $('.tab-content li[data-id="' + $(this).data('num') + '"]').show();
    });
});

演示：Fiddle

Answer 3

ID不能以数字开头，并且您不应该在页面中有2个具有相同ID的元素。

请改为：http://jsfiddle.net/jMQs9/1/

<ul class="tab-links">
    <li data-num="1"><a href="#">tab one</a>

    </li>
    <li data-num="2"><a href="#">tab two</a>

    </li>
</ul>
<ul class="tab-content">
    <li data-id="1">content for tab one</li>
    <li data-id="2">content for tab two</li>
</ul>

<ul class="tab-content">
    <li data-id="1">content for tab one #2</li>
    <li data-id="2">content for tab two #2</li>
</ul>

和JS

$(function () {

    $('.tab-links li').click(function (e) {
        e.preventDefault();
        $('ul.tab-content>li').hide();
        $('ul.tab-content>li[data-id="' + $(this).data('num')+'"]').show();
    });

});

Answer 4

---------------的Javascript --------------

<script type="text/javascript">
$(function () {

    $('.tab-links li').each(function ()
    {
        $(this).click(function (e) {
        e.preventDefault();
        $('.tab-content > li').hide();
        $('ul.tab-content').find('li#' + $(this).data('num')).show();
        });
    });

});

</script>

--------------的Html ------------

<ul class="tab-links">
    <li data-num="1"><a href="#">tab one</a>

    </li>
    <li data-num="2"><a href="#">tab two</a>

    </li>
</ul>
<ul class="tab-content">
    <li id="1">content for tab one</li>
    <li id="2">content for tab two</li>
</ul>

<ul class="tab-content">
    <li id="1">content for tab one #2</li>
    <li id="2">content for tab two #2</li>
</ul>

jQuery隐藏/显示内容

4 个答案: