0

虽然我已经完成了一些 Javascript 编码，但我认为自己是一个更新手的科学怪人类型的编码器，基本上是通过反复试验来剪切和粘贴，看看我是否可以得到一些工作......只是对我诚实的评估我的经验水平。

我有一个独特的东西我正在开发，并希望得到一些关于 Javascript 的帮助。这是我正在尝试/需要做的事情：对于基于网页的信息亭演示文稿，我正在使用一个 HTML 网页，但有多个部分，其可见性根据我目前使用的 Javascript 切换开/关，效果很好。（我不想/不能使用带有链接的常规 HTML 页面，因为它最终是如何运行的）。

上述问题的唯一问题是，没有简单的方法可以为可能有多种访问方式的结束页面创建“后退”或“上一页”链接。它不会“知道”用户来自哪里。

所以这就是我想做的事情：通过我的 OnClick javascript 函数传递 2 个变量，需要打开/关闭的 DIV 名称......以及当前可见 DIV 名称的第二个变量，以便下一个 DIV 打开可以“记住”以前的（现在不可见的）DIV 是什么，以便可以有一个准确的“后退”按钮。

这是一些示例代码：

每个打开和关闭的 DIV 部分的设置如下：

<div id="sectionName" class="content">
</div>

这些 DIV 的按钮/链接设置如下：

<a href="#" onclick="toggleVisibility('sectionName');"></a>

这些运行 Javacript：

function toggleVisibility(selectedTab) {

     var content = document.getElementsByClassName('content');

     for(var i=0; i<content.length; i++) {
          if(content[i].id == selectedTab) {
                content[i].style.display = 'block';
          } else {
                content[i].style.display = 'none';
          }
     }

}

所以我希望有一种方法可以做这样的事情：

<a href="#" onclick="toggleVisibility('sectionNameToTurnOn, 'rememberThisSectionName');"></a>

因此，当单击它时，打开的下一个 DIV 还可以包含基于传递的变量的 Javascript 生成的链接，例如：

<a href="#" onclick="toggleVisibility('rememberThisSectionName');">Previous<br>Menu</a>

我知道打开和关闭 DIV 的 Javascript 切换可能不允许生成像我上面描述的那样的动态 Javascript 链接，所以我把它扔在那里寻求其他更有经验的程序员的帮助。理想情况下，我想尝试将所有内容都融入我迄今为止创建的内容中，这样我就不必从头开始。有任何想法吗？

请参考此示例页面：

www.gs3creative.com/test/

4

2 回答 2

0

对我来说，一个简单的解决方案是在 HTML 页面上呈现两个内容页面，并在需要时通过 onlick 处理程序通过 CSS 中的 javascript 添加一个类来显示和隐藏内容：

function showDiv() {
    document.getElementById("theObject").className = "visible";
}

CSS：

// Switch between the content adding the  classes and removing the old class 

.visible{
    display:none;
} 

.show{
    display:block;
}

另一种解决方案是通过 javascript 使用会话“php”来保存带有 in 语句的变量。

<?php if (session_status() == PHP_SESSION_NONE) {
session_start();
$_SESSION['user_is where_variable'] = "im on page div 1";
}

无论如何，这也可以通过js来完成。

javascript have a conditional statement using your $_SESSION vars;

if (variable == "im on page div 1" ){
   // your functions
}else if ( variable == "im on page div 1"){
  // another function

}

Create your click handler to update the variables in the session.
于 2013-11-02T15:46:51.417 回答
0

您可以使用位置哈希 (mypage.html#mydivid)，然后使用它history.back()来处理“返回”导航。

在正确的哈希值上拼接 div 的显示......

var oldHash = '';

// fires when the hash changes
function hash_changed() {
    var hash = location.hash.replace('#', ''); // get the div ID
    var div = document.getElementById(hash); // find the content div on the page
    var allDivs = document.getElementByClassName('content'); // get all of the content divs

    // hide all the content divs
    for (var i = 0; i < allDivs.length; i++) {
        var thisDiv = allDivs[i];
        thisDiv.style.display = 'none';
    }

    // only show the right one
    div.style.display = 'block';       
}

// this triggers the event
setInterval(function() {

    // if the hash has changed, fire the function
    if (oldHash != location.hash) {
        oldHash = location.hash;
        hash_changed();
    }

}, 100); // call every 100 ms so that there is no lag

因此，如果您将导航设置为“mypage.html#sectionName”，它将隐藏“内容”类的所有其他 div，然后仅显示 ID 为“sectionName”的 div。

于 2013-11-02T15:58:12.393 回答