Question

我正在努力实现这一目标：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>

Answer 1

两件事：首先，没有两个元素应该具有相同的 id。此外，id 不能以数字开头。
Here's演示。

Answer 2

尝试用Class替换id，然后尝试div的

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

FIDDLE

Answer 3

进行了这些修复/改进：

HTML中的ID值是唯一的而不是数字。
更改了选择器以匹配新的HTML ID值
切换到更简单的.hide()和.show()。
简化了让id不使用jQuery，因为它没用。
从新按钮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>

不正确地实现Jquery？

3 个答案: