Question

虽然我已经完成了一些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>

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

请参考此示例页面：

www.gs3creative.com/test /

Answer 1

对我来说，一个简单的解决方案是在HTML页面上呈现两个内容页面，并在需要时通过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;
}

使用会话“php”通过javascript将变量保存在语句中的另一种解决方案。

<?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.

Answer 2

您可以使用位置哈希（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。

在Javascript OnClick中传递多个值，以特定方式使用这些值

2 个答案: