-1

编辑：已解决：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;
    }
4

6 回答 6

5

您的选择器无效。即使id以数字开头的值在 HTML 中有效，但在 CSS中无效。在它们前面放一个x或其他东西使它们有效，例如

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

变成

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

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

此外，正如Arun 在他的回答中指出的那样id，您在多个元素上使用了相同的值。这也是无效的。id表示“标识符”，标识符是唯一的（这就是重点）。当您id在多个元素上具有相同值时，选择器引擎的行为是未定义的（因为它是无效的），但通常浏览器使用文档中的第一个元素id。

我想你可能想要这个：

<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");
});

我改变了什么：

  1. 我id从其中的 div 中删除了值，.tabs并用于data-id指示它们应该激活哪个 div。

  2. 我使这些id值有效。

  3. 我让代码响应对.tabs元素的点击，但前提是点击是在它的一个div子元素上（委托处理）。

  4. 使用该data-id属性使相关的 div 处于活动状态。

于 2013-07-16T12:06:01.427 回答
2

根据规范，HTML4 中的 ID 必须以字母开头。数字 ID 在 HTML5 中是可以的，但在 CSS 中仍然不行。最有可能导致您的问题。

HTML 中 id 属性的有效值是什么？

于 2013-07-16T12:06:03.900 回答
0

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

于 2013-07-16T12:07:47.987 回答
0

我会像这样简化你的 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();
    });
});
于 2013-07-16T12:10:31.853 回答
0

嗨，使用时它们应该是唯一的，然后您可以直接链接到它们而无需告知父母。直接链接到 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>
于 2013-07-16T12:17:34.073 回答
0

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

  1. 正如我的朋友所说，您必须更改 ID，因为它在 CSS 中无效但在 HTML5 中有效（CSS 的整数值根本不起作用，jQuery 使用 CSS）

  2. ID 的目的是使其唯一并在所有元素之间识别它，而无需输入完整路径。你应该使用这样的东西

$('#x2009').show();
于 2013-07-16T12:36:48.683 回答