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

两件事：首先，没有两个元素应该具有相同的 id. 此外，ids 不能以数字开头。
这是一个演示。

于 2012-09-14T21:59:31.920 回答
1

尝试用 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();
    });
});​

小提琴

于 2012-09-14T22:02:25.970 回答
0

进行了这些修复/改进：

  1. 使 HTML 中的 id 值是唯一的，而不是数字。
  2. 更改了选择器以匹配新的 HTML id 值
  3. 切换到.hide()哪个.show()更简单。
  4. 简化获取 id 以不使用 jQuery，因为它没有用。
  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 回答