Question

编辑：已解决：ID无法以数字开头。

我在它上面制作了一个带有标签的div（2009 - 2013）。在内容应该显示的div中，我只写了一年来表明我的代码是否有效。

如果我写$('div#updates div.content div').hide();，所有内容都会隐藏（就像它应该的那样），但如果我写$('div#updates div.content div#2009').show();，则没有任何反应。有谁知道为什么（我认为错误的选择器，但我检查了它，它没有工作。

HTML：

<div id="updates">
<div class="tabs">
    <div id="2009">2009</div>
    <div id="2010">2010</div>
    <div id="2011">2011</div>
    <div id="2012">2012</div>
    <div id="2013">2013</div>
</div><br />
<div class="content">
    <div id="2009">
        2009
    </div>
    <div id="2010">
        2010
    </div>
    <div id="2011">
        2011
    </div>
    <div id="2012">
        2012
    </div>
    <div id="2013" class="active">
        2013
    </div>
</div>

JS（jQuery）：

        $(document).ready(function(e) {
            $('div#updates div.tabs div#2013').addClass("active");

            $('div#updates div.tabs div').click(function(e) {
                $('div#updates div.tabs div').removeClass("active");
                $(this).addClass("active");
                $('div#updates div.content div').hide();
            });

            $('div#updates div.tabs div#2009').click(function(e) {
                $('div#updates div.content div#2009').show();
            });
            $('div#updates div.tabs div#2010').click(function(e) {
                $('div#updates div.content div#2010').show();
            });
            $('div#updates div.tabs div#2011').click(function(e) {
                $('div#updates div.content div#2011').show();
            });
            $('div#updates div.tabs div#2012').click(function(e) {
                $('div#updates div.content div#2012').show();
            });
            $('div#updates div.tabs div#2013').click(function(e) {
                $('div#updates div.content div#2013').show();
            });
    });

的CSS：

        div#updates div.tabs div{
        float: left;
        padding: 5px 10px 4px 10px;
        background-color: #a90000;
        border: 1px solid #600;
        z-index: inherit;
        position: relative;
        margin-right: -1px;
        cursor: default;
    }
    div#updates div.tabs div.active{
        background-color: #f00;
        border-bottom: none;
        padding-bottom: 5px;
        z-index: 10;
    }
    div#updates div.content{
        background-color: #f00;
        position: absolute;
        top: 38px;
        width:500px;
        border: 1px solid #600;
        padding: 10px;
        z-index: 9;
    }
    div#updates div.content div{
        display: none;
    }
    div#updates div.content div.active{
        display: block;
    }
    /*opmaak berichten*/
    div#updates div.content div h3{
        color: #0f0;
        font: 24px Impact , sans-serif;
        text-decoration: none;
    }

Answer 1

您的选择器无效。即使以数字开头的id值为valid in HTML，它们也是not valid in CSS。将x放在他们面前或其他东西以使其有效，例如

<div id="1">...</div>

变为

<div id="x1">...</div>

所以可以使用选择器#x1（这是有效的）。

此外，作为Arun points out in his answer，您在多个元素上使用了相同的id值。这也是无效的。 id表示“标识符”，标识符是唯一的（这就是重点）。当您在多个元素上具有相同的id值时，选择器引擎的行为是未定义的（因为它无效），但通常浏览器使用文档中的第一个元素id。< / p>

我想你可能想要这个：

<div id="updates">
<div class="tabs">
    <div data-id="year2009">2009</div>
    <div data-id="year2010">2010</div>
    <div data-id="year2011">2011</div>
    <div data-id="year2012">2012</div>
    <div data-id="year2013">2013</div>
</div><br />
<div class="content">
    <div id="year2009">
        2009
    </div>
    <div id="year2010">
        2010
    </div>
    <div id="year2011">
        2011
    </div>
    <div id="year2012">
        2012
    </div>
    <div id="year2013" class="active">
        2013
    </div>
</div>

有了这个：

$(".tabs").on("click", "> div", function() {
    $(".active").removeClass("active");
    $("#" + this.getAttribute("data-id")).addClass("active");
});

我改变了什么：

我从id中的div中删除了.tabs值，并使用data-id来指示应激活哪个div。
我使id值有效。
我让代码响应.tabs元素的点击次数，但仅当点击位于其中一个div子级上时（委托处理）。
使用data-id属性激活相关div。

Answer 2

according to the spec，HTML4中的ID必须以字母开头。 HTML5中的数字ID是可以的，但它们仍然不在CSS中。最有可能导致你的问题。

What are valid values for the id attribute in HTML?

Answer 3

id不应该以数字开头，这是正确的。仅适用于Internet Explorer。

Answer 4

我会像这样简化你的JS（你可以摆脱ID）：

$(function(e) {
    $(".tabs div").click(function(){
        var _index = $(this).index();

        $(".tabs div").removeClass("active");
        $(".tabs div:eq("+_index+")").addClass("active");

        $(".content div").hide();
        $(".content div:eq("+_index+")").show();
    });
});

Answer 5

您好，在使用时，它们应该是唯一的，然后您可以直接链接到它们，而无需告诉父母。直接链接到ID是最快的方式。

jQuery：

$(document).ready(function(e) {
        $('#a2013').addClass("active");
        $('#b2013').show();
        $('div#updates div.tabs div').click(function(e) {
            $('div#updates div.tabs div').removeClass("active");
            $(this).addClass("active");
            $('div#updates div.content div').hide();
        });

        $('#a2009').click(function(e) {
            $('#b2009').show();
        });
        $('#a2010').click(function(e) {
            $('#b2010').show();
        });
        $('#a2011').click(function(e) {
            $('#b2011').show();
        });
        $('#a2012').click(function(e) {
            $('#b2012').show();
        });
        $('#a2013').click(function(e) {
            $('#b2013').show();
        });
});

和html：

  <div id="updates">
    <div class="tabs">
        <div id="a2009">2009</div>
        <div id="a2010">2010</div>
        <div id="a2011">2011</div>
        <div id="a2012">2012</div>
        <div id="a2013">2013</div>
    </div><br />
    <div class="content">
        <div id="b2009">
            2009
        </div>
        <div id="b2010">
            2010
        </div>
        <div id="b2011">
            2011
        </div>
        <div id="b2012">
            2012
        </div>
        <div id="b2013">
            2013
        </div>
    </div>
  </div>

Answer 6

要解决此问题，您必须执行以下两个步骤：

正如我的朋友所说，你必须更改ID，因为它在CSS中无效但在HTML5中有效（CSS的整数值根本不起作用，jQuery使用CSS）
ID的目的是使其唯一，并在不键入完整路径的情况下在所有元素之间进行标识。你应该使用这样的东西

$('#x2009').show();

jQuery .show不起作用。错误的选择器？

6 个答案: