0

我正在尝试创建一个基本上包含 3 个部分的页面。在任何给定点，都应该只显示 1 个部分。虽然对 javascript/jquery 来说相对较新，但我认为这对于一些链接和 switch 语句来说非常简单，但是我遇到了障碍，无法弄清楚我哪里出错了。

我在http://jsfiddle.net/donschaeferart/LVXKb/2/上设置了一个小提琴，它重新创建了我想要实现的基本功能。代码如下：

HTML：

<div class="divMain">
    <div id="divSub1">
        <h1>SubSection 1</h1>
        <p><a href="" onclick="selectSection(2);">Next</a></p>
    </div>
    <div id="divSub2" class="displayNone">
        <h1>SubSection 2</h1>
        <p><a href="" onclick="selectSection(1);">Previous</a></p>
        <p><a href="" onclick="selectSection(3);">Next</a></p>
    </div>
    <div id="divSub3" class="displayNone">
        <h1>SubSection 3</h1>
        <p><a href="" onclick="selectSection(2);">Previous</a></p>
    </div>
</div>

CSS：

.displayNone{display:none;}

Javascript：

function selectSection(n){  
switch (n){
    case 1:
        $("#divSub1").removeClass('displayNone');
        $("#divSub2").addClass('displayNone');
        $("#divSub3").addClass('displayNone');
    break;
    case 2:
        $("#divSub1").addClass('displayNone');
        $("#divSub2").removeClass('displayNone');
        $("#divSub3").addClass('displayNone');
    break;
    case 3:
        $("#divSub1").addClass('displayNone');
        $("#divSub2").addClass('displayNone');
        $("#divSub3").removeClass('displayNone');
    break;
    default:
        break;
}
}

然而，虽然代码是有效的并且看起来可以正常工作，但有两件事正在发生......

  1. 当我在实际页面上运行类似代码并单击其中一个链接时，它会执行，然后在函数完成后立即恢复，因此看起来函数根本没有执行
  2. 当我运行小提琴并尝试单击一个链接时，结果视口切换到似乎是 JSFiddle 站点本身的混乱版本（如果您向右滚动并单击“登录”，它会将您带到 JSFiddle 登录屏幕）

我很确定某处有一个小错误会导致一切都失败，但我很茫然，所以任何帮助都将不胜感激。

4

1 回答 1

0

@Kevin & Amit：感谢您的帮助！在查看了建议以及来自 Amit 链接的以下内容后...

b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.

我能够阻止小提琴做出我最初遇到的奇怪行为。重新编写代码也让我走上了让整个事情在 JSFiddle 和我正在使用它的实际站点上正常运行的轨道上。代码的最终版本可用@jsfiddle.net/donschaeferart/LVXKb/

于 2013-10-17T13:21:16.927 回答