jquery - jQuery .show は機能しません。セレクターを間違えた？

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数字で始まる値は HTMLでは有効ですが、CSS では有効ではありません。xそれらの前に、またはそれらを有効にする何かを置きます。

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

になる

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

そのため、セレクター#x1を使用できます (これは有効です)。

さらに、Arun が answer で指摘しているように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 から値を削除し、アクティブにする必要がある div を示すために.tabs使用しました。data-id

2. id値を有効にしました。

3. 要素のクリックにコードが応答するようにしましたが.tabs、クリックがそのdiv子の 1 つにあった場合のみです (委任された処理)。

4. 属性を使用data-idして、関連する div をアクティブにします。

Answer 2

仕様によると、HTML4 の ID は文字で始まる必要があります。数値 ID は HTML5 では問題ありませんが、CSS にはまだありません。ほとんどの場合、それが問題を引き起こします。

HTML の id 属性の有効な値は何ですか?

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>