2

私はこれを達成しようとしています：http：//jsfiddle.net/BcFVv/2/

これは私のローカルコードですが、正しく機能していません。

私は何かが足りないのですか？ライブラリを正しく実装していませんか？関数を誤ってラップしましたか？

<!--- CSS --->
<style type="text/css">
    .mydivhide {
        display: none
    }​
</style>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>

<body>

<!--- JQUERY --->

<script type="text/javascript">
    $(document).ready(function() {
        $("#buttons a").click(function() {
          var id = $(this).attr("id");
          $("#pages div").css("display", "none");
          $("#pages div#" + id + "").css("display", "block");
    });​
});​
</script>​​​​

<div id="buttons">
     <a href="#" id="1" class="mybutton myred">Div 1</a>
     <a href="#" id="2" class="mybutton myblue">Div 2</a>
     <a href="#" id="3" class="mybutton myblue">Div 3</a>
</div>

<div id="pages">
    <div id="1" class="mydivshow">1111</div>
    <div id="2" class="mydivhide">2222</div>
    <div id="3" class="mydivhide">3333</div>
</div>​
4

3 に答える 3

2

2つのこと：最初に、2つの要素が同じで idあってはなりません。また、idsを数字で始めることはできません。
これがデモです。

于 2012-09-14T21:59:31.920 に答える
1

IDをClassに置き換えてから、divを試してください

$(document).ready(function() {
        $("#buttons a").click(function() {
          var id = $(this).attr("id");
            console.log(id)
          $("#pages div").hide();
          $("#pages div." + id).show();
    });
});​

フィドル

于 2012-09-14T22:02:25.970 に答える
0

これらの修正/改善を行いました：

  1. HTMLのid値を、数値ではなく一意にするようにしました。
  2. 新しいHTMLID値に一致するようにセレクターを変更しました
  3. に切り替えて.hide()、.show()はるかに簡単です。
  4. 役に立たないため、jQueryを使用しないIDの取得を簡略化しました。
  5. 新しいボタンIDから番号を抽出して、目的のページを識別するために使用できるようにします。

作業デモ： http： //jsfiddle.net/jfriend00/JHK4a/

結果のコードは次のとおりです。

<script type="text/javascript">
    $(document).ready(function() {
        $("#buttons a").click(function() {
             var id = this.id.replace("b", "");
             $("#pages div").hide();
             $("#p" + id).show();
        });
    });
</script>

<div id="buttons">
     <a href="#" id="b1" class="mybutton myred">Div 1</a>
     <a href="#" id="b2" class="mybutton myblue">Div 2</a>
     <a href="#" id="b3" class="mybutton myblue">Div 3</a>
</div>

<div id="pages">
    <div id="p1" class="mydivshow">1111</div>
    <div id="p2" class="mydivhide">2222</div>
    <div id="p3" class="mydivhide">3333</div>
</div>​
于 2012-09-14T22:17:28.280 に答える